Introduction to CSS3 Keyframes
KeyframesKnown as keyframes , they are similar to keyframes in Flash. In CSS3, it mainly starts with "@keyframes", followed by the animation name plus a pair of curly brackets "{...}", and the brackets are some style rules for different time periods.
@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}
The style rules in a "@keyframes" can be composed of multiple percentages, such as creating more percentages between "0%" and "100%", and assigning each percentage to the element that needs to be animated Add different styles to achieve an ever-changing effect.
Experience and skills: When defining the animation name in @keyframes, 0% and 100% can also be represented by the keywords from and to , where 0% corresponds to from and 100% corresponds to to.
Browser support:
Chrome and Safari require the prefix -webkit- ; Foxfire requires the prefix -moz- .
Example of changing the background color:
<div>Mouse over me</div>
@keyframes changecolor{
0%{
background: red;
}
20%{
background:blue;
}
40%{
background:orange;
}
60%{
background:green;
}
80%{
background:yellow;
}
100%{
background: red;
}
}
div {
width: 300px;
height: 200px;
background: red;
color:#fff;
margin: 20px auto;
}
div:hover {
animation: changecolor 5s ease-out .2s;
}
Call animation in CSS3
The animation-name property is mainly used to call the animation defined by @keyframes . Special attention: The animation name called by animation-name needs to be exactly the same as the animation name defined by "@keyframes" (case- sensitive ). If it is inconsistent, it will not have any animation effect.
Syntax: animation-name: none | IDENT[,none|DENT]*;
1. IDENT is the animation name created by @keyframes , as mentioned above (the animation name called by animation-name needs to be exactly the same as the animation name defined by "@keyframes");
2. None is the default value. When the value is none, there will be no animation effect. This can be used to override any animation.
Note: Add the -webkit- prefix to Chrome and Safari, and add -moz- to Firefox.
The yellow ball rolls along the inside of the box:
<div><span></span></div>
@keyframes around{
0% {
transform: translateX(0);
}
25%{
transform: translateX(80px);
}
50%{
transform: translate(80px, 80px);
}
75%{
transform:translate(0,80px);
}
100%{
transform: translateY(0);
}
}
div {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 20px auto;
}
div span {
display: inline-block;
width: 20px;
height: 20px;
background: orange;
border-radius: 100%;
animation-name:around;
animation-duration: 10s;
animation-timing-function: ease;
animation-delay: 1s;
animation-iteration-count:infinite;
}
Setting animation playback time in CSS3
animation-duration is mainly used to set the playback time of CSS3 animations. Its usage is similar to transition-duration. It is used to specify the duration of the element playback animation, that is, the time required to complete an animation from 0% to 100% . Unit: S seconds
Syntax rules: animation-duration: <time>[,<time>]*
The value <time> is a numerical value in seconds, and its default value is " 0 ", which means that the animation period is "0", that is, there is no animation effect (if the value is negative, it will be regarded as "0").
Change background color and change shape
@keyframes changeColor {
from {
background: red;
border-radius: 0;
}
to {
background:green;
border-radius: 100%;
}
}
div {
width: 200px;
height: 200px;
background: red;
text-align:center;
margin: 20px auto;
line-height: 200px;
color: #fff;
}
div:hover {
animation-name: changeColor;
animation-duration: 5s;
animation-timing-function: ease-out;
animation-delay: .1s;
}
CSS3中设置动画播放方式
animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式
语法规则：
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
它和transition中的transition-timing-function一样，具有以下几种变换方式：ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier。对应功如下：
在调用move动画播放中，让元素样式从初始状态到终止状态时，先加速再减速，也就是渐显渐隐效果。
黄色球球沿着水平方向在方框内曲线跳动：
<div><span></span></div>
@keyframes move {
0%{
transform: translate(0);
}
15%{
transform: translate(50px,90px);
}
30%{
transform: translate(75px,0);
}
45%{
transform: translate(125px,90px);
}
60%{
transform:translate(150px,0);
}
75%{
transform: translate(225px,90px);
}
100%{
transfrom: translate(240px,0);
}
}
div {
width: 250px;
height: 100px;
border: 1px solid red;
margin: 20px auto;
}
div span {
display: inline-block;
width: 20px;
height: 20px;
background: green;
border-radius: 100%;
animation-name:move;
animation-duration: 10s;
animation-timing-function:ease;
animation-delay:.1s;
animation-iteration-count:infinite;
}
CSS3中设置动画开始播放的时间
animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间语法规则：animation-delay:<time>[,<time>]*
CSS3中设置动画播放次数
animation-iteration-count属性主要用来定义动画的播放次数。
语法规则：
animation-iteration-count: infinite | <number> [, infinite | <number>]*
1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。
2、如果取值为infinite，动画将会无限次的播放
注意：Chrome或Safari浏览器，需要加入-webkit-前缀！
CSS3中设置动画播放方向
animation-direction属性主要用来设置动画播放方向，其语法规则如下：
animation-direction:normal | alternate [, normal | alternate]*
其主要有两个值：normal、alternate
1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
例如：通过animation-direction属性，将move动画播放动画方向设置为alternate，代码为：
animation-direction:alternate;
注意：Chrome或Safari浏览器，需要加入-webkit-前缀！
黄色小方框在框中左右上下滑动
<div><span></span></div>
@keyframes move {
0%{
transform: translateY(90px);
}
15%{
transform: translate(90px,90px);
}
30%{
transform: translate(180px,90px);
}
45%{
transform: translate(90px,90px);
}
60%{
transform: translate(90px,0);
}
75%{
transform: translate(90px,90px);
}
90%{
transform: translate(90px,180px);
}
100%{
transform: translate(90px,90px);
}
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
margin: 20px auto;
}
span {
display: inline-block;
width: 20px;
height: 20px;
background: orange;
transform: translateY(90px);
animation-name: move;
animation-duration: 10s;
animation-timing-function: ease-in;
animation-delay: .2s;
animation-iteration-count:infinite;
animation-direction:alternate;
}
CSS3中设置动画的播放状态
animation-play-state属性主要用来控制元素动画的播放状态
其主要有两个参数：running和paused
其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。
CSS3中设置动画时间外属性
animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：
| 属性值 |
效果 |
| none |
默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 |
| forwards |
表示动画在结束后继续应用最后的关键帧的位置 |
| backwards |
会在向元素应用动画样式时迅速应用动画的初始帧 |
| both |
元素动画同时具有forwards和backwards效果 |
在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。