C3动画及常用属性
- 动画的制作步骤:
- 定义动画
- 调用动画
一、定义动画
-
定义动画用keyframes关键字。
@keyframes 动画名称 { /* 动画开始时的状态 */ 0% { height: 50px } 50% { height: 70px } /* 动画结束时的状态 */ 100% { height: 100px } }
-
其中 0% 50% 100% 被称为动画序列。
二、调用动画
-
哪个元素要使用此动画直接通过动画名称调用。
-
调用动画所用的关键字为:animation-name
animation-name: 动画名称; /* 调用动画后,还必须给该动画完成一个周期所花费的时间(单位为秒或毫秒) */ animation-duration:持续时间;
一个最简单的动画案例如下:
<style>
/* 1. 定义动画 */
@keyframes donghua {
/* 动画开始时的状态 */
0% {
height: 50px
}
50% {
height: 100px
}
/* 动画结束时的状态 */
100% {
height: 200px
}
}
div {
width: 100px;
height: 100px;
margin: 100px auto;
background-color: #00fdad;
/* 2. 调用动画 */
animation-name: donghua;
/* 动画持续时间 */
animation-duration: 1.5s;
}
</style>
<div></div>
- 效果如下:
动画的常用属性
属性 | 含义 |
---|---|
@keyframes | 定义动画 |
animation | 所有动画属性的简写属性,除了animation-play-state属性。 |
animation-name(必须写) | 规定@keyframes动画的名称。 |
animation-duration(必须写) | 规定动画完成一个周期所花费的秒或毫秒 , 默认是0。 |
animation-timing-function | 规定动画的速度曲线,默认是"ease"。 |
animation-delay | 规定动画何时开始,默认是0 |
animation-iteration-count | 规定动画被播放的次数,默认是1,还有infinite(循环) |
animation-direction | 规定动画是否在下一-周期逆向播放,默认是"normal ",alternate逆播放 |
animation-play-state | 规定动画是否正在运行或暂停。默认是"running",还有"paused"(暂停)。 |
animation-fill-mode | 规定动画结束后状态,保持forwards,回到起始backwards |
动画属性的复合写法:
animation :动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation: | 动画名称 | 持续时间 | 运动曲线 | 何时开始 | 播放次数 | 是否反方向 | 动画起始或者结束的状态; |
animation: | donghua(必填) | 1.5s(必填) | ease(默认) | 0(默认) | 1(默认),infinite(循环) | normal(默认),alternate(逆向播放) | backwards(回到起始位置),forwards(停在结束位置) |
animation: myfirst 5s linear 2s infinite alternate;
-
简写属性里面不包含animation-play-state(暂停)
-
暂停动画: animation-play-state: puased; 经常和hover配合使用
-
想要动画走回来,而不是直接跳回来: animation-direction : alternate; (逆播放)
-
盒子动画结束后,停在结束位置: animation-fill-mode : forwards; (保持在结束位置)
-
速度曲线表格
值 | 含义 |
---|---|
linear | 动画从头到尾的速度是相同的。匀速 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢。 |
ease-in | 动画以低速开始。 |
ease-out | 动画以低速结束。 |
ease-in-out | 动画以低速开始和结束。 |
steps() | 指定了时间函数中的间隔数量(步长) |