关键属性animation
其中包括:动画名称;时间;延迟时间;播放次数
关键帧
@keyframes 动画名称{
0%{
相关属性.....
}
20%{
相关属性....
}
40%{
相关属性...
}
60%{
相关属性....
}
80%{
相关属性...
}
100%{
相关属性....
}
}
1、animation-name 定义一个或者多个动画的名称
eg:demo
2、animation-duration 动画执行的时间
取值:
0时,动画不执行
time:正数(单位为s或者ms)
- animation-delay 动画执行的延迟时间
取值:
0时,不延迟。立即执行
负数时:延迟时间之前的动画将会被截断
整数时:按照设置的时间延迟 - animation-iteration-count 设置动画执行的次数
取值:
number:自定义动画执行的次数,设置值可为0或正整数
infiniter:无线循环 - animation-timing-function 动画的运动方式
ease;liear;ease-in;ease-out;ease-in-out - animation-direction 指定对象动画运动的方向
取值:
Normal:正常方向
reverse:反方向运动
alternate:正反方向交替运动(奇正,偶返)
alternate-reverse:与alternate正好相反 - anmation-fill-mode 设置对象动画时间之外的状态
取值:
name:默认值
forword:保持动画结束时的状态
backwards:保持动画开始的状态
both:遵循forwords和backwords两种规则 - animation-play-state 设置对象动画的状态
取值:
running: 默认值;paused暂停运动
//复杂的写法
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
简单的写法
div
{
animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
————————————————
版权声明:本文为CSDN博主「饮冰十年」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_39654784/article/details/79381564