css3动画

1.css3可以创建动画,它可以取代许多网页的动画图像,flash动画和Javascript才能实现的效果.

CSS3动画是什么?

动画是让元素冲一种样式逐渐变化成另外一种样式的效果

动画与其他变化的属性最大的区别是可以不用鼠标触发,可以自主的,反复的执行某些动画

动画要想使用先要定义动画,创建动画

CSS3 @keyframes 规则

要创建 CSS3 动画，你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

定义动画,创建动画

 @keyframes move {
            /* 开始 */
            from{
                transform: translate(0,0);
            }
            /* 结束 */
            to{
                transform: translate(800px,200px);
            }
        }

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

定义好动画后,还需要调用它才能让样式发生改变,它就想自定义函数一样,先定义一段功能,然后去调用使用它,想让那个元素有这段变化,就给那个元素加上animation属性.

.box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            border-radius: 50%;
            animation: move 4s linear infinite  3s alternate ;
        }
        @keyframes move{
            0%{
                transform: translate(0,0);
            }
            25%{
                transform: translate(200px,0);
            }
            50%{
                transform: translate(400px,0);
            }
            75%{
                transform: translate(600,0);
            }
            100%{
                transform: translate(800,0);
            }

        }

 

1. 动画名字参照css类选择器命名

2. 动画时长和延迟时间别忘了带单位 s

3. infinate 无限循环动画（重复次数）

4. alternate 为反向 就是左右来回执行动画（跑马灯）

5. forwards 动画结束停留在最后一帧状态， 不循环状态使用

6. linear 让动画匀速执行

让动画暂停,

/* 鼠标经过box，  则 ul 停止动画 */
.box:hover ul {
    animation-play-state: paused;
}

多组动画共同执行

/* 我们想要2个动画一起执行  animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;