CSS3 动画_html/css_WEB-ITnose
概览
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
由于是CSS3 嘛，所以部分旧版本浏览器当然无法完美呈现，节哀。
小试牛刀学习任何东西都需要有一定的成就感才会有继续学习的动力，先别管那么多，先让我们的动画动起来。
<!DOCTYPE html><html><head><style> @keyframes myfirst { from {background:red;} to {background:yellow;} } /* Firefox */ @-moz-keyframes myfirst { from {background:red;} to {background:yellow;} } /* Safari and Chrome */ @-webkit-keyframes myfirst { from {background:red;} to {background:yellow;} } /* Opera */ @-o-keyframes myfirst { from {background:red;} to {background:yellow;} } div { width:100px; height:100px; margin: 50px auto; background:red; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ }</style></head><body><div></div></body></html>是不是很简单，很炫酷呀？
实现CSS3 动画需要至少以下几个条件：
使用 @keyframes 创建动画并命名
使用 animation简写属性 或 其他具体属性 调用动画并设置动画时长
将 animation 绑定到某个选择器上
下面具体介绍各相关属性吧。
创建动画 @keyframes通过 @keyframes 规则，您能够创建动画。
创建动画的原理是将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 from 和 to来规定改变发生的时间。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
@keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;}}/* Firefox */@-moz-keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;}}/* Safari 和 Chrome */@-webkit-keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;}}/* Opera */@-o-keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;}}上面我们使用 @keyframes 创建了动画，接下来我们来调用动画。
上面也说了，调用动画最基本的是动画名称和动画花费的时间，下面将具体介绍动画调用的相关属性。
animation-name
指定要调用的动画。
animation-name: keyframename | none;
none 规定无动画效果（可用于覆盖来自级联的动画）。
keyframename 命名遵循如下规则：
名字可以是字母，数字，_ 或 -,区分大小写，只能以字母或单-开头，不能使用none,unset,initial,inherit关键字。
animation-duration
animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。
animation-duration: 2s; /*等价于 2000ms*/
animation-timing-function
animation-timing-function 规定动画的速度曲线。
animation-timing-function: value;
此属性值使用名为三次贝塞尔（Cubic Bezier）函数的数学函数来生成速度曲线。
有如下值可选：
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的。 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| ease-out | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| cubic-bezier(n, n, n, n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
5 个预定义关键字对应的贝塞尔函数为：
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)ease-out: cubic-bezier(0, 0, 0.58, 1.0)ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)
简单体会一下 5 种速度曲线的效果：
想亲自去体验各种值对速度的影响，请移步这里：贝塞尔速度曲线
animation-delay
animation-delay 属性定义动画何时开始。
animation-delay: time;
值以秒或毫秒计。允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。
animation-iteration-count
animation-iteration-count 属性定义动画的播放次数。
animation-iteration-count: n | infinite;
n 表示具体的次数，默认为1，infinite 规定无限次播放。
animation-direction
animation-direction 属性定义是否应该轮流反向播放动画。
animation-direction: normal | reverse | alternate | alternate-reverse;
两个关键字可选，normal 表示动画正常播放，默认值，从 0% -> 100% 再从 0% -> 100%. reverse 与 normal 相反，从 100% -> 0% 再从 100% -> 0%. alternate 表示轮流反向播放，从 0% -> 100% 再从 100% -> 0% 再从 0% -> 100%. alternate-reverse 与 alternate 相反。
animation-play-state
animation-play-state 属性规定动画正在运行还是暂停。
animation-play-state: paused | running;
paused 表示动画正在暂停，动画不会动。running 表示动画正在动，默认。
animation
此属性为上述七个具体属性的简写属性。
animation: name duration timing-function delay iteration-count direction play-state;
对CSS3 动画先简单了解这么多，后续可能有新内容再补充。
参考资料CSS3 动画
cubic-bezier贝塞尔曲线CSS3动画工具
Cubic-Bezier
Mozilla animation
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404?
Apr 04, 2025 pm 11:54 PM
GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...
