1-2-13 【CSS3】CSS的动画
2020-11-09 本文已影响0人
Liyager
题外话：再肝一章~
文章内容输出来源：拉勾教育大前端就业集训营
1.概述
- 概述：css3中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flash 动画以及JavaScript。
- 步骤：css3动画制作分为两步：创建动画、绑定动画。
2.创建动画——@keyframes规则
- 概述：@keyframes规则用于创建动画。其中规定某项CSS样式，就能创建由从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。
- 多过程控制：需要使用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%。0%是动画的开始，100% 是动画的完成。
- 书写方法：
@keyframes 自定义名称{
动画过程1{
CSS样式变更
}
动画过程2{
CSS样式变更
}
...
}
- 举个例子：
<style>
@keyframes myMovement {
0%{
transform: translateY(0px);
}
25%{
transform: translateY(200px);
}
50%{
transform: translateY(0px);
}
75%{
transform: translateY(-200px);
}
100%{
transform: translateY(0px);
}
}
</style>
说明：以上只是创建了一个动画，因为没有绑定所以无法播放。用百分比定义了5个阶段，每个阶段代表在Y轴上不同的位置。
3.绑定动画——animation属性
- 概述：动画创建好了之后，需要指定一个对象来完成这个动画，也就是在一个选择器中，添加animation属性，否则不会产生动画效果。
- 书写方式：
选择器{
animation: 动画名称 过渡时间 贝塞尔曲线 动画次数 延迟播放时间；
}
- 举个完整的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: pink;
border-radius: 50%;
width: 100px;
height: 100px;
margin: 200px auto;
/* 绑定动画 */
animation: myMovement 4s linear ;
}
@keyframes myMovement {
0%{
transform: translateY(0px);
}
25%{
transform: translateY(200px);
}
50%{
transform: translateY(0px);
}
75%{
transform: translateY(-200px);
}
100%{
transform: translateY(0px);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
说明：通过animation来绑定设置好的动画，即可让对应的元素动起来啦~如果不设置播放次数，则默认播放1次。
- 单一属性：
| 属性 | 说明 |
|---|---|
| animation-name | 规定@keyframes动画的名称 |
| animation-duration | 规定动画完成一个周期所需要的时间，s或ms为单位 |
| animation-timing-fuction | 指定动画的时间曲线（贝塞尔曲线） |
| animation-delay | 规定动画开始的时间 |
| animation-iteration-count | 动画播放的次数，infinite表示无限次 |
浏览器兼容
- Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
- Chrome 和 Safari 需要前缀 -webkit-。
- Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
前端文章汇总目录
https://www.jianshu.com/p/6d80dd616ff4
结束语：一花一世界，一木一浮生，愿与诸君共勉
