名词解释
animation（动画）：
语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-name：指定要绑定到选择器的关键帧的名称
语法：animation-name: keyframename|none;12
keyframename：指定要绑定到选择器的关键帧的名称
none：
ease-in-out：动画以低速开始和结束
linear：动画从头到尾的速度是相同的
ease：默认。动画以低速开始，然后加快，在结束前变慢
ease-in：动画以低速开始
ease-out：动画以低速结束
ease-in-out：动画以低速开始和结束
animation-delay（设置动画在启动前的延迟间隔）
animation-fill-mode（把物体动画地从一个地方移动到另一个地方）
语法：animation-fill-mode: none|forwards|backwards|both|initial|inherit;12
forwards：在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值
backwards ：动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值
both：动画遵循 forwards 和 backwards 的规则
步骤与思路：
要实现加载动画，首先需要三个原点用到css的动画知识点与边框知识
实现三点并排出现，可以使用flex或者inline-block
定义帧动画出现时间以及动态效果，使用@keyframes 方法定义帧动画
呈现的效果是依次显示，可以使用animation-delay来延迟出现时间，让加载动画更有层次性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>加载动画</title></head><style> .content { margin: 20% auto; width: 150px; } .content > div { width: 20px; height: 20px; background-color: #33e5e5; border-radius: 50%; display: inline-block; animation: action 1.5s infinite ease-in-out; animation-fill-mode: both; } .content .point1 { animation-delay: -0.3s; } .content .point2 { animation-delay: -0.1s; } @keyframes action { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }</style><body><div class="content"> <div class="point1"></div> <div class="point2"></div> <div class="point3"></div></div></body></html>
线实例预览地址：预览
至此加载动画就完成了
网友评论