「css」转换过渡动画

2D转换

1：translate()

     移动：transform: translate(50px,100px)

2：rotate()

     旋转：transform: rotate(30deg)

3：scale()

     缩放：transform: scale(2,3)

4：skew()

     倾斜：transform: skew(30deg,20deg)

5：matrix()

     合并以上参数：transform:matrix(0.866,0.5,-0.5,0.866,0,0)

 

3D转换

过渡

//单个
div
{
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    -webkit-transition:width 2s; /* Safari */
}

div:hover
{
    width:300px;
}
//多个
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}
//分写
div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}
//简写，分别是名称、花费时间、时间曲线、何时开始
div
{
    transition: width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
}

 

动画

1：定义一个动画

//例子1
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
//例子2
@keyframes rotateminute {
    to {
        transform: rotate(360deg);
    }
}

2：使用动画

animation: myfirst 5s linear 2s infinite alternate;//动画名称,一个周期花费时间,过渡类型,何时开始，次数，是否在下一周期逆向播放