CSS3动画

Css3的变换/变形

 　　平移、旋转、缩放、倾斜效果

 样式属性:  Transform

　　　　　　　/*平移*/
            /* transform: translate(100px,100px); */
            /* 缩放 */
            /* transform: scale(1.2); */
            /* 旋转 */
            /* transform: rotate(180deg); */
            /* 倾斜 */
            /* transform: skew(20deg,30deg);
            */
            /* 设置奇点 */
            transform-origin: 20% 40%;

Hack: -浏览器内核名-样式属性（都要使用）

   IE浏览器:   -ms-           Chrome/Safari:  -webkit-

   火狐浏览器: -moz-        欧朋浏览器: -o-

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg);     /* IE 9 */
-moz-transform:rotate(7deg);     /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg);     /* Opera */
}

Css3过渡

样式属性：Transition:

语法：transition: property duration timing-function delay;

　　使用过渡:  transition-property  常用all

　　过渡时间: transition-duration属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。transition-duration:5s

　　过渡速度: 时间曲线transition-timing-function 属性规定过渡效果的速度曲线。常用: linear  匀速

　　设置延时:transition-delay 属性规定过渡效果何时开始。transition-delay 值以秒或毫秒计。

 

Csss3动画

@keyframes : 设置关键帧

　　0%  开始点

　　100% 结束点

　　from 等同于0%

　　To 等于100%

 /* 定义一个动画 */
        @keyframes mymove1 {
            0%{left:0px;width:100px; background-color: orange; height: 100px;} 
            50%{
               left:300px; width:300px; background-color: red; height: 300px;
            }
            100%{
               left:0px; width:100px; background-color: green; height: 100px;
            }
        }

        .box{
            border-radius: 50%;
            /*使用动画*/
            animation: mymove1 5s infinite;
            position: relative;

        }

 

播放次数：n  /  infinite无线循环