css3的动画实现

关键属性animation
其中包括：动画名称；时间；延迟时间；播放次数

关键帧

@keyframes 动画名称{
        0%{
        相关属性.....
    }
        20%{
        相关属性....
    }
    40%{
        相关属性...
}
    60%{
        相关属性....
}

    80%{
    相关属性...
}

    100%{
    相关属性....
}

}

1、animation-name 定义一个或者多个动画的名称
eg:demo
2、animation-duration 动画执行的时间
取值：
0时，动画不执行
time:正数（单位为s或者ms）

1. animation-delay 动画执行的延迟时间
   取值：
   0时，不延迟。立即执行
   负数时：延迟时间之前的动画将会被截断
   整数时：按照设置的时间延迟
2. animation-iteration-count 设置动画执行的次数
   取值：
   number:自定义动画执行的次数，设置值可为0或正整数
   infiniter:无线循环
3. animation-timing-function 动画的运动方式
   ease;liear;ease-in;ease-out;ease-in-out
4. animation-direction 指定对象动画运动的方向
   取值：
   Normal:正常方向
   reverse:反方向运动
   alternate:正反方向交替运动（奇正，偶返）
   alternate-reverse:与alternate正好相反
5. anmation-fill-mode 设置对象动画时间之外的状态
   取值：
   name:默认值
   forword:保持动画结束时的状态
   backwards:保持动画开始的状态
   both:遵循forwords和backwords两种规则
6. 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