内容简介：CSS3 的 animation 是通过关键帧的形式做出来的。使用时常结合
一.Animation 动画
1. 含义
CSS3 的 animation 是通过关键帧的形式做出来的。使用时常结合 transform 属性进行制作。
2.animation 语法
animation 属性是一个简写属性，用于设置下方六个动画属性；
animation: name duration timing-function delay iteration-count direction;
| 值 | 描述 |
|---|---|
| name | 需要绑定到选择器 keyframes 的名称 |
| duration | 规定需要完成动画的时间 |
| timing-function | 规定动画的速度曲线 |
| delay | 规定动画开始前的延迟时间 |
| iteration-count | 规定动画应该执行的次数 |
| direction | 规定是否轮流方向播放动画 |
接下来将分析每个属性的取值：
1 . timing -function 属性
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是一致的 |
| ease | 默认，开始时慢，慢慢加速，结束前减速 |
| ease-in | 低速开始 |
| ease-out | 低速结束 |
| ease-in-out | 低速开始结束 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
2.iteration-count
| 值 | 描述 |
|---|---|
| n | 动画播放次数为 n |
| infinite | 动画播放循环 |
3.direction
| 值 | 描述 |
|---|---|
| normal | 默认，动画正常播放 |
| alternate | 动画应该轮流反向播放 |
3.补充 transform 的属性
具体属性可以参考
http://www.w3school.com.cn/cssref/pr_transform.asp
4.实战
该实例实现绕圈动画
- html 代码
<div class="mainBox">
<div class="sun">
<img src="../image/1.jpg">
</div>
<div class="earth">
<img src="../image/1.jpg">
</div>
</div>
复制代码
- CSS 代码
.mainBox {
position: relative;
width: 600px;
height: 600px;
}
.sun {
position: absolute;
width: 100px;
height: 100px;
top: 250px;
left: 250px;
}
.mainBox img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.earth {
position: absolute;
width: 100px;
height: 100px;
top: 250px;
left: 450px;
transform-origin: -150px 50px;
animation: rotate 5s linear forwards;
}
@keyframes rotate {
to {
transform: rotate(360deg)
}
}
复制代码
- 效果
结合 clip-path 做动画
介绍 clip-path 是用来裁剪的，如对一个 div 应用 clip-path:circle(40% at 50% 50%),意为裁剪一个半径为 40%，圆心在(50%，50%) 位置的一个圆；使用 clip-circle 可用来做一些形状变化的动画
clip-path 实战
- html 代码
<div class="imgBox">
<img src="../image/1.jpg">
</div>
复制代码
- CSS 代码
.imgBox img {
clip-path: circle(10% at 50% 50%);
transition: clip-path 8s ease-in-out;
}
.imgBox img:hover {
clip-path: circle(40% at 50% 50%)
}
复制代码
-
效果
本文参考李银城的书籍《高效前端》
欢迎大家留言探讨~
以上所述就是小编给大家介绍的《CSS3 动画解析》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- Flutter 动画全解析（动画四要素、动画组件、隐式动画组件原理等）
- 深度解析属性动画的思想 - 带你手动实现属性动画框架
- Android动画解析（一）
- Vue中的基础过渡动画原理解析
- CSS动画属性关键帧keyframes全解析
- RecyclerView 源码深入解析——绘制流程、缓存机制、动画等
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
创投之巅——中国创投精彩案例
投资界网站 / 人民邮电出版社 / 2018-11 / 69.00
中国的科技产业发展，与创投行业密不可分。在过去的几十年间，资本与科技的结合，缔造了众多创业“神话”。回顾这些科技巨头背后的资本路径，可以给如今的国内创业者很多有益的启发。 本书从风险投资回报率、投资周期、利润水平、未来趋势等多个维度，筛选出了我国过去几十年中最具代表性的创业投资案例，对其投资过程和企业成长过程进行复盘和解读，使读者可以清晰地看到优秀创业公司的价值与卓越投资人的投资逻辑。一起来看看 《创投之巅——中国创投精彩案例》 这本书的介绍吧!
