一.Animation 动画
1. 含义
CSS3 的 animation 是通过关键帧的形式做出来的。使用时常结合 transform
属性进行制作。
2.animation 语法
animation 属性是一个简写属性,用于设置下方六个动画属性;
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
值 | 描述 |
---|---|
name | 需要绑定到选择器 keyframes 的名称 |
duration | 规定需要完成动画的时间 |
timing-function | 规定动画的速度曲线 |
delay | 规定动画开始前的延迟时间 |
iteration-count | 规定动画应该执行的次数 |
direction | 规定是否轮流方向播放动画 |
fill-mode | 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式 |
play-state | 指定动画是否正在运行或已暂停 |
接下来将分析每个属性的取值:
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
值 | 描述 |
---|---|
<number> | 动画播放次数为 n,可以为小数 |
infinite | 动画播放循环 |
3.direction
值 | 描述 |
---|---|
normal | 默认,动画正常播放 |
alternate | 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。 |
reverse | 反向播放 |
alternate-reverse | 动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。 |
4.fill-mode
值 | 描述 |
---|---|
none | 默认值,动画在动画执行之前和之后都不会运用任何样式到目标元素上 |
forwards | 目标保持动画最后一帧的样式,最后一帧是哪个取决于animation-direction和 animation-iteration-count |
backwards | 动画采用相应第一帧的样式,保持 animation-delay |
both | 动画将会执行 forwards 和 backwards 执行的动作 |
5.play-state
值 | 描述 |
---|---|
running | 当前动画正在运行 |
paused | 当前动画已被停止 |
3.补充 transform 的属性
具体属性可以参考 www.w3school.com.cn/cssref/pr_t…
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%)
}
复制代码
- 效果