1.动画介绍
动画的原理:视觉暂留作用、画面逐渐变化
动画的作用:愉悦感、引起注意、操作的反馈、掩饰加载过程
CSS中动画类型:
1.transition补间动画(有开始有结尾,中间补出来)
2.keyframe关键帧动画(也是补间动画,但是可以有多个关键帧,也就是中间多了些帧)
3.逐帧动画
区分几个概念:
animation(动画) ~关键帧,往复性。
transition(过渡)~ 属性,触发动作,一过性。
transform(变换)~ 复杂的变换参数。
translate(移动)~translate只是transform的一个属性值,即移动。
参考文章:https://juejin.im/post/5b137e6e51882513ac201dfb#heading-0
可以使用animate.css中CSS动画效果库。
还可以参考一篇文章:https://www.cnblogs.com/Fengzp/p/5548493.html
2.transition动画
补间动画中间过程:
位置-平移(left/right/margin/transform)
方位-旋转(transform)
大小-缩放(transform)
透明度(opacity)
其他-线性变换(transform)
.container{
width: 100px;
height: 100px;
background: red;
transition: all 1s;
/* transition-timing-function: ease-in-out; */
transition-timing-function: cubic-bezier(0.465, -0.460, 0.525, 1.435);
/* transition-delay: 1s; */
}
.container:hover{
width: 800px;
background:green;
}
<div class="container">
</div>
我们先看一个简单的transition示例:
//将鼠标悬停在一个div元素上,逐步改变表格的宽度从100px到300px:
div
{
width:100px;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}
transition属性:
transition: property duration timing-function delay;
property:指定CSS属性的name(比如width、background等等),transition效果
duration:transition效果需要指定多少秒或毫秒才能完成
timing-function:指定transition效果的转速曲线
delay:定义transition效果开始的时候
关于timing-function属性有:linear、ease、ease-in、ease-in-out、cubic-bezier(n,n,n,n)
cubic-bezier也是规定速度曲线一种。
更多timing-function效果可以看(还可以自定制效果):https://matthewlein.com/tools/ceaser
动画调试方法:
F12调试面板之后,按ESC键进入animation面板进行调试。
3.keyframe动画
关键帧动画相当于多个补间动画
与元素状态的变化无关
定义更加灵活
.container{
width: 100px;
height: 100px;
background: red;
animation: run 1s linear;
/* animation-direction: reverse; */
/* animation-fill-mode: forwards; */
animation-iteration-count: infinite;
/* animation-play-state: paused; */
}
@keyframes run{
0%{
width: 100px;
}
50%{
width: 800px;
}
100%{
width: 100px;
}
}
<div class="container">
</div>
animation属性是一个简写属性,用于设置六个动画属性:
1.animation-name
2.animation-duration
3.animation-timing-function
4.animation-delay
5.animation-iteration-count(规定动画应该播放的次数。)
6.animation-direction(规定是否应该轮流反向播放动画。)
animation-iteration-count:n|infinite;
n:定义动画播放次数的数值
infinite:规定动画应该无限次播放
animation-direction:normal|alternate;
normal:默认值。动画应该正常播放
alternate:动画应该轮流反向播放
4.逐帧动画
逐帧动画是关键帧动画的一种特殊用法,也是多个帧,但是没有补间。
适用于无法补间计算的动画。
使用steps()这个值实现。
逐帧动画适用于动画时长比较短、图片不是很大的场景。
原图是这样(400X200),通过雪碧图原理+逐帧动画,让他动起来。
steps(n,start/end) 第一个参数 number 为指定的间隔数,即把动画/关键帧之间分为 n 步阶段性展示,第二个参数默认为 end,设置最后一步的状态,start 为结束时的状态,end 为开始时的状态。
steps(1)效果拿下面举例,0%到12.5%时候是不动的,也就是steps(1)中1让他1步执行,保持在background-position: 0 0;
位置,以下类似。
.container{
width: 100px;
height: 100px;
border: 1px solid red;
background: url(./animal.png) no-repeat;
animation: run 1s infinite;
animation-timing-function: steps(1);
}
@keyframes run{
0%{
background-position: 0 0;
}
12.5%{
background-position: -100px 0;
}
25%{
background-position: -200px 0;
}
37.5%{
background-position: -300px 0;
}
50%{
background-position: 0 -100px;
}
62.5%{
background-position: -100px -100px;
}
75%{
background-position: -200px -100px;
}
87.5%{
background-position: -300px -100px;
}
100%{
background-position: 0 0;
}
}
<div class="container">
</div>
5.CSS面试真题
1.CSS动画的实现方式有几种?
1.transition补间动画/过渡动画(有开始有结尾,中间补出来)
2.keyframe关键帧动画(也是补间动画,但是可以有多个关键帧,也就是中间多了些帧)
3.逐帧动画
2.过渡动画和关键帧动画的区别
过渡动画需要有状态变化
关键帧动画不需要状态变化
关键帧动画能控制更精细
3.如何实现逐帧动画
使用关键帧动画
去掉补间(steps)
4.相对JS动画,CSS动画的性能
性能不坏
部分情况下优于JS
但JS可以做到更好
部分高危属性,如box-shadow等