文章目录
前言
学好css3的动画animation属性很重要,我们可以做到许多类似的效果(平移,旋转,缩放)
参考MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation
一、@keyframes关键帧
通过在动画序列中定义关键帧(或waypoints)的样式来控制CSS动画序列中的中间步骤
参考MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes
1.from{}to{}
@keyframes name{
from {
background: red;}
to {
background: yellow;}
}
from等价于0%,on等价于100%
2.0%{}100%{}
@keyframes name{
0% {
background: red;}
100% {
background: yellow