CSS3--CSS3动画

CSS3动画 animation

动画(animation)

兼容性

| IE10+ | Firefox 16+ | Chrome 43+ | Sapafi 9+ | Opera 30+ | Android(-webkit) |

animation-name

检索或设置对象所应用的动画名称

语法

animation-name: keyframesname | none;

  • keyframesname : 指定要绑定到选择器的关键帧的名称
  • none : 指定有没有动画(可用于覆盖从级联的动画)
1
2
3
4
5
6
7
8
9
.box{
-webkit-animation-name: circle;
animation-name: circle;
}

@keyframes circle {
from {transform: rotateX(0deg); }
to {transform: rotateX(180deg);}
}

animation-duration

检索或设置对象动画的持续时间

语法

animation-duration: time;

  • time : 指定动画播放完成花费的时间。默认值为0,即没有动画效果
1
2
3
4
5
6
7
8
9
10
11
.box{
-webkit-animation-name: circle;
animation-name: circle;
-webkit-animation-duration: 2s;
animation-duration: 2s;
}

@keyframes circle{
from {transform: rotateX(0deg); }
to {transform: rotateX(180deg);}
}

animation-timing-fuction

检索或设置对象动画的过渡类型

语法

animation-timing-fuction: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);

  • ease(默认) : 动画以低速开始,然后加快,在结束前变慢
  • linear : 动画从头到尾的速度是相同的
  • ease-in : 动画以低速开始
  • ease-out : 动画以低速结束
  • ease-in-out : 动画以低速开始和结束
  • cubic-bezier(n,n,n,n) : 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值
1
2
3
4
5
6
7
8
9
10
11
12
13
.box{
-webkit-animation-name: circle;
animation-name: circle;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}

@keyframes circle{
from {transform: rotateX(0deg); }
to {transform: rotateX(180deg);}
}

animation-delay

检索或设置对象动画的过渡类型

语法

animation-delay: time;

  • delay : 可选,定义动画开始前等待的时间,以秒或毫秒计,默认为0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box{
-webkit-animation-name: circle;
animation-name: circle;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}

@keyframes circle{
from {transform: rotateX(0deg); }
to {transform: rotateX(180deg);}
}

animation-iteration-count

检索或设置对象动画的循环次数

语法

animation-iteration-count: infinite | <number>;

  • infinite : 无限循环
  • <number> : 循环次数,默认值为1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.box{
-webkit-animation-name: circle;
animation-name: circle;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-iteration-count: 4;
animation-iteration-count: 4;
}

@keyframes circle{
from {transform: rotateX(0deg); }
to {transform: rotateX(180deg);}
}

animation-direction

检索或设置对象动画的在循环中是否反向运动

语法

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;

  • normal : 正常方向
  • reverse : 反方向运行
  • alternate : 动画先正常方向运行,再反方向运行,并持续交替进行
  • alternate-reverse : 动画先反方向运行,再正常方向运行,并持续交替进行
  • alternatealternate-reverse依赖于循环次数animation-iteration-count
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.box{
-webkit-animation-name: circle;
animation-name: circle;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate-reverse;
animation-direction: alternate-reverse;
}

@keyframes circle{
from {transform: rotateX(0deg); }
to {transform: rotateX(180deg);}
}

animation-fill-mode

规定动画在播放之前或之后,其动画效果是否可见

语法

animation-fill-mode: none | forwards | backwards | both;

  • none : 不改变默认行为
  • forwards : 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)
  • backwards : 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)
  • both : 向前和向后填充模式都被应用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.box{
-webkit-animation-name: circle;
animation-name: circle;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

@keyframes circle{
from {transform: rotateX(0deg); }
to {transform: rotateX(180deg);}
}

animation-play-state

规定动画正在运行还是暂停

语法

animation-fill-mode: paused | running;

  • paused : 规定动画已暂停
  • running : 规定动画正在播放,默认值

利用:hover或者Javascript来控制动画的暂停或播放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.box{
-webkit-animation-name: circle;
animation-name: circle;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}

.box:hover{
-webkit-animation-play-state: running;
animation-play-state: running;
}

@keyframes circle{
from {transform: rotateX(0deg); }
to {transform: rotateX(180deg);}
}

animation属性简写

语法

animation: name duration timing-function delay iteration-count direction;

1
2
3
4
5
6
7
8
9
.box{
-webkit-animation: circle 10s ease-in-out 2s infinite alternate;
animation: circle 10s ease-in-out 2s infinite alternate;
}

@keyframes circle{
from {transform: rotate(0deg); }
to {transform: rotate(180deg);}
}

CSS3 @keyframes

关键帧,可以指定任何排列顺序来决定Animation动画变化的关键位置

以百分比来规定改变发生的时间,或者通过关键词 “from” 和 “to”,等价于 0% 和 100%

语法

@keyframes animationname {keyframes-selector {css-styles;}}

  • animationname 必需,定义动画的名称
  • keyframes-selector 必需。动画时长的百分比。 0-100% | from(与 0% 相同)| to(与 100% 相同)
  • css-styles 必需。一个或多个合法的 CSS 样式属性。
1
2
3
4
5
6
7
8
9
10
11
12
@-webkit-keyframes circle {
form { transform: rotateX(0deg); }
25% { transform: rotateX(45deg); }
75% { transform: rotateX(315deg); }
to { transform: rotateX(360deg); }
}
@keyframes circle {
form { transform: rotateX(0deg); }
25% { transform: rotateX(45deg); }
75% { transform: rotateX(315deg); }
to { transform: rotateX(360deg); }
}

动画性能优化 will-change

  • position-fixed代替background-attachment
  • 带图片的元素放在伪元素中
  • 巧用will-change
1
2
3
4
5
6
7
8
9
10
11
12
13
.front::before {
content: '';
position: fixed; // 代替background-attachment
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white;
background: url(/img/front/mm.jpg) no-repeat center center;
background-size: cover;
will-change: transform; // 创建新的渲染层
z-index: -1;
}

作用

提前通知浏览器元素将要做什么动作,让浏览器提前准备合适的优化设置

目标

增强页面渲染性能

语法

1
2
3
4
5
6
7
8
9
10
11
12
/* 关键字值 */
will-change: auto;
will-change: scroll-position; /*将要改变元素的滚动位置*/
will-change: contents; /*将要改变元素的内容*/
will-change: transform; /* <custom-ident>示例 ,明确指定将要改变的属性与给定的名称*/
will-change: opacity; /* <custom-ident>示例 */
will-change: left, top; /* 两个<animateable-feature>示例 ,可动画的一些特殊值*/

/* 全局值 */
will-change: inherit;
will-change: initial;
will-change: unset;

就目前而言,使用的基本上都是:

1
2
3
.example {
will-change: transform;
}

使用注意事项

will-change的使用要谨慎,遵循最小化影响原则,所以,上面的例子,才使用伪元素去搞,独立渲染

可以让父元素hover的时候,声明will-change,这样,移出的时候就会自动remove,触发的范围基本上是有效元素范围。

1
2
3
4
5
6
7
8
9
.will-change-parent:hover .will-change {
will-change: transform;
}
.will-change {
transition: transform 0.3s;
}
.will-change:hover {
transform: scale(1.5);
}

如果使用JS添加will-change, 事件或动画完毕,一定要及时remove. 比方说点击某个按钮,其他某个元素进行动画。点击按钮(click),要先按下(mousedown)再抬起才出发。因此,可以mousedown时候打声招呼, 动画结束自带回调,于是:

1
2
3
4
5
6
7
8
9
10
dom.onmousedown = function() {
target.style.willChange = 'transform';
};
dom.onclick = function() {
// target动画...
};
target.onanimationend = function() {
// 动画结束回调,移除will-change
this.style.willChange = 'auto';
};
文章目录
  1. 1. CSS3动画 animation
    1. 1.1. animation-name
    2. 1.2. animation-duration
    3. 1.3. animation-timing-fuction
    4. 1.4. animation-delay
    5. 1.5. animation-iteration-count
    6. 1.6. animation-direction
    7. 1.7. animation-fill-mode
    8. 1.8. animation-play-state
    9. 1.9. animation属性简写
  2. 2. CSS3 @keyframes
  3. 3. 动画性能优化 will-change
|