补间动画
1 位置-平移(left/right/margin/transform)
2 方位-旋转(transform)
3 大小-缩放(transform)
4 透明度(opacity)
5 其他-线性变换(transform)
transition
.container {
width:100px;
height: 100px;
background:red;
transition:all 1s;
}
.container:hover {
width:800px;
background:green;
}
关键字帧
1 相当于多个补间动画
2 与元素无关
.container {
width:100px;
height: 100px;
background: red;
animation:run 1s;
animation-direction:reverse;
animation-iteration-count:infinite ;//循环的次数,可以是无限循环infinite,也可以是具体的数字
animation-play-state:paused://播放状态
animation-fill-mode:forwards;//动画填充模式
}
@keyframes run {
0% {
width:100px
}
100% {
width:800px;
}
}
注意:如果只有这两个的话就可以写0%可以写from
100% 可以写 to
如果有其他的,就要写百分百
<div class="container" </div
逐帧动画
1 适用于无法补间计算的动画
2 资源较大
3 使用steps()
.container {
width:100px;
height:100px;
border:1px solid red;
background:url(./animal.png) no-repeat;
animation:run 1s infinite
animation-timing-function:steps(2);
}
@keyframes run {
0% {
background-position:0 0 ;
}
12.5% {
background-position:-100px 0;
}
...
}
CSS动画的实现方式有几种?(面试题)
1 transition
2 keyframes(animation)
过度动画和关键帧动画的区别?
1 过渡动画需要有状态变化
2 关键帧动画不需要状态变化
3 关键帧动画能控制更精细
如何实现逐帧动画
1 使用关键帧动画
2 去掉补间(steps)
CSS 动画的性能
1 行能不坏
2 部分情况下由于JS
3 但JS可以做到更好
4 部分高危属性 box-shadow等
CSS动画与JS动画的区别
1css动画
1浏览器可以对动画进行优化
2代码冗长,想用CSS实现稍微复杂一点的动画,最后CSS代码会变的非常笨重
2JS代码
1 CSS3有兼容性问题,而JS大多数没有兼容性问题
2 代码的复杂度高于CSS动画