关于Transform Transition Animation 详解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div{
            width: 200px;
            height: 100px;
            background: pink;
            border: 1px solid #ccc;
            margin-bottom: 10px;
        }
        .box1{
            transform: translate(20px, 15px);
            -webkit-transform: translate(20px, 15px);
            -moz-transform: translate(20px, 15px);
            -ms-transform: translate(20px, 15px);
            -o-transform: translate(20px, 15px);
        }
        .box2{
            transform: translate3d(5px, 10px, 500px);
            -webkit-transform: translate3d(5px, 10px, 500px);
            -moz-transform: translate3d(5px, 10px, 500px);
            -ms-transform: translate3d(5px, 10px, 500px);
            -o-transform: translate3d(5px, 10px, 500px);
        }
        .box3{
            transform: translateX(30px);
            -webkit-transform: translateX(30px);
            -moz-transform: translateX(30px);
            -ms-transform: translateX(30px);
            -o-transform: translateX(30px);
        }
        .box4{
            transform: scale(2.0, 2.0);
            -webkit-transform: scale(2.0, 2.0);
            -moz-transform: scale(2.0, 2.0);
            -ms-transform: scale(2.0, 2.0);
            -o-transform: scale(2.0, 2.0);
        }
        .box5{
            transform: scale3d(1, 1, 2.0);
            -webkit-transform: scale3d(1, 1, 2.0);
            -moz-transform: scale3d(1, 1, 2.0);
            -ms-transform: scale3d(1, 1, 2.0);
            -o-transform: scale3d(1,1, 2.0);
        }
        .box6{
            transform: scaleZ(2);
            -webkit-transform: scaleZ(2);
            -moz-transform: scaleZ(2);
            -ms-transform: scaleZ(2);
            -o-transform: scaleZ(2);
        }
        .box7{
            transform: rotate(30deg);
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            -o-transform: rotate(30deg);
        }
        .box8{
            transform: rotate3d(1, 1, -1, 30deg);
            -webkit-transform: rotate3d(1, 1, -1, 30deg);
            -moz-transform: rotate3d(1, 1, -1, 30deg);
            -ms-transform: rotate3d(1, 1, -1, 30deg);
            -o-transform: rotate3d(1, 1, -1, 30deg);
        }
        .box9{
            transform: rotateX(80deg);
            -webkit-transform: rotateX(80deg);
            -moz-transform: rotateX(80deg);
            -ms-transform: rotateX(80deg);
            -o-transform: rotateX(80deg);
        }
        .box10{
            transform: skew(30deg, 30deg);
            -webkit-transform: skew(30deg, 30deg);
            -moz-transform: skew(30deg, 30deg);
            -ms-transform: skew(30deg, 30deg);
            -o-transform: skew(30deg, 30deg);
        }
        .box11{
            transform: skewX(45deg);
            -webkit-transform: skewX(45deg);
            -moz-transform: skewX(45deg);
            -ms-transform: skewX(45deg);
            -o-transform: skewX(45deg);
        }
        .box12{
            position: relative;
            padding: 20px;
            perspective: 150;
            -webkit-perspective: 150;
        }
        .box12>div{
            width: 160px;
            height: 60px;
            border: 1px solid #ddd;
            background: #09f;
            transform: rotateX(45deg);
            -webkit-transform: rotateX(45deg);
            -moz-transform: rotateX(45deg);
            -ms-transform: rotateX(45deg);
            -o-transform: rotateX(45deg);
        }
        .box13{
            background: #09f;
            width: 200px;
            transition: width 2s,background 2s;
            -webkit-transition: width 2s,background 2s;
            -moz-transition: width 2s,background 2s;
            -ms-transition: width 2s,background 2s;
            -o-transition: width 2s,background 2s;
        }
        .box13:hover{
            width: 400px;
            background: blue;
        }
        .box14{
            position: relative;
            animation: move 5s linear infinite alternate;;
            -webkit-animation: move 5s linear infinite alternate;;
            -moz-animation: move 5s linear infinite alternate;;
            -ms-animation: move 5s linear infinite alternate;;
            -o-animation: move 5s linear infinite alternate;
        }
        /* animation-play-state: paused|running;设置对象动画的状态,下例hover运动暂停 */
        .box14:hover{
            animation-play-state: paused;
            -webkit-animation-play-state: paused;
            -moz-animation-play-state: paused;
        }
        
        @keyframes move {
            from{left: 0px;}
            to{left: 500px;}
        } 
        @-webkit-keyframes move{
            0%{left: 0px;}
            100%{left: 500px;}
        }
        .box15 span{
            display: block;
            font-weight: bolder;
            font-size: 20px;
        }
        .a1{
            transform: translate(60px);
            -webkit-transform: translate(60px);
            -moz-transform: translate(60px);
            animation: move1 2s ease-out forwards;
            -webkit-animation: move1 2s ease-out forwards;
            -moz-animation: move1 2s ease-out forwards;
        }
        @keyframes move1{
            0%{transform: translate(0px);opacity: 0;}
            40%{transform: translate(20px);opacity: 0.4;}
            70%{transform: translate(40px);opacity: 1.0;}
            100%{transform: translate(60px);opacity: 0;}
        }
        @-webkit-keyframes move1{
            0%{-webkit-transform: translate(0px);opacity: 0;}
            40%{-webkit-transform: translate(20px);opacity: 0.4;}
            70%{-webkit-transform: translate(40px);opacity: 1.0;}
            100%{-webkit-transform: translate(60px);opacity: 0;}
        }
        @-moz-keyframes move1{
            0%{-moz-transform: translate(0px);opacity: 0;}
            40%{-moz-transform: translate(20px);opacity: 0.4;}
            70%{-moz-transform: translate(40px);opacity: 1.0;}
            100%{-moz-transform: translate(60px);opacity: 0;}
        }
        .a3{
            opacity: 0;
            transform: translate(20px);
            -webkit-transform: translate(20px);
            -moz-transform: translate(20px);
            animation: move3 2s ease-in 2s forwards;
            -webkit-animation: move3 2s ease-in 2s forwards;
            -moz-animation: move3 2s ease-in 2s forwards;
        }
        @keyframes move3{
            0%{transform: translate(120px);opacity: 0;}
            40%{transform: translate(80px);opacity: 0.4;}
            70%{transform: translate(40px);opacity: 1.0;}
            100%{transform: translate(20px);opacity: 0;}
        }
        @-webkit-keyframes move3{
            0%{-webkit-transform: translate(120px);opacity: 0;}
            40%{-webkit-transform: translate(80px);opacity: 0.4;}
            70%{-webkit-transform: translate(40px);opacity: 1.0;}
            100%{-webkit-transform: translate(20px);opacity: 0;}
        }
        @-moz-keyframes move3{
            0%{-moz-transform: translate(120px);opacity: 0;}
            40%{-moz-transform: translate(80px);opacity: 0.4;}
            70%{-moz-transform: translate(40px);opacity: 1.0;}
            100%{-moz-transform: translate(20px);opacity: 0;}
        }
        .a2{
            opacity: 0;
            font-size: 36px;
            text-align: center;
            animation: move2 2s ease-in 4s forwards;
            -webkit-animation: move2 2s ease-in 4s forwards;
            -moz-animation: move2 2s ease-in 4s forwards;
        }
        @keyframes move2{
            0%{opacity: 0;}
            20%{opacity: 0.6;}
            40%{opacity: 0.8;}
            60%{opacity: 0.4;}
            80%{opacity: 0.8;}
            100%{opacity: 1.0;}
        }
        @-webkit-keyframes move2{
            0%{opacity: 0;}
            20%{opacity: 0.6;}
            40%{opacity: 0.8;}
            60%{opacity: 0.4;}
            80%{opacity: 0.8;}
            100%{opacity: 1.0;}
        }
        @-moz-keyframes move2{
            0%{opacity: 0;}
            20%{opacity: 0.6;}
            40%{opacity: 0.8;}
            60%{opacity: 0.4;}
            80%{opacity: 0.8;}
            100%{opacity: 1.0;}
        }
    </style>
</head>
<body>
    <!-- transform属性向元素应用2D或3D转换,我们可以旋转、缩放、移动、倾斜元素,语法:transform: none|transform-functions; -->
    <!-- translate(x,y)--定义2D位移 -->
    <div class="box1">translate(x,y)</div>
    <!-- translate(x,y,z)--定义3D位移 -->
    <div class="box2">translate(x,y,z)</div>
    <!-- translateX(x)--定义只按X轴位移 (同理按Y轴,3D的Z轴)-->
    <div class="box3">translateX(x)</div>

    <!-- scale(x,y)--定义2D缩放转换 -->
    <div class="box4">scale(x,y)</div>
    <!-- scale3d(x,y,z)--定义3D缩放转换 -->
    <div class="box5">scale3d(x,y,z)</div>
    <!-- scaleZ(z)--定义只按Z轴缩放(同理按Y轴,X轴) -->
    <div class="box6">scaleZ(z)</div>

    <!-- rotate(angle)--定义2D旋转 -->
    <div class="box7">rotate(angle)</div>
    <!-- rotate3d(angle)--定义3D旋转 x,y,z的值组成在3d空间的矢量坐标,对象将会围绕这个坐标轴旋转-->
    <div class="box8">rotate3d(x,y,z,angle)</div>
    <!-- rotateX(angle) 定义沿X轴的3d旋转(同理设置Y轴Z轴的3d旋转)-->
    <div class="box9">rotateX(angle)</div>

    <!-- skew(x-angle,y-angle) 定义沿X轴和Y轴的倾斜转换-->
    <div class="box10">skew(x-angle,y-angle)</div>
    <!-- skewX(xangle) 定义沿X轴的2d倾斜转换(同理设置Y轴的2d倾斜转换)-->
    <div class="box11">skewX(angle)</div>

    <!-- perspective(n)为3D转换元素定义透视视图(当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身) -->
    <div class="box12">
        <div>perspective(n)</div>
    </div>


    <!-- transition属性对元素设置对象变换时的过渡,用于设置4个过渡属性:
    transition-property--参与过渡的属性、
    transition-duration--对象过渡的持续时间、
    transition-timing-function--对象中过渡的动画类型、
    transition-delay--对象延迟过渡的时间 -->
    <!-- 如果只提供一个<time>参数,则为 <' transition-duration '> 的值定义;如果提供二个<time>参数,则第一个为 <' transition-duration '> 的值定义,第二个为 <' transition-delay '> 的值定义 -->
    <div class="box13">transition过渡效果</div>


    <!-- animation 设置对象元素的动画特效,用于设置6个动画属性(默认值none 0 ease 0 1 normal):
    animation-name--需要绑定到选择器上的动画名称、
    animation-duration--完成动画所花费的时间、
    animation-timing-function--规定动画的速度曲线、
    animation-delay--规定在动画开始前的延迟、
    animation-iteration-count--规定动画播放的次数、
    animation-direction--规定动画是否轮流反向播放
    ( forwards--当动画完成后,保持最后一个属性值 )-->
    <div class="box14">animation动画特效</div>
    <div class="box15">
        <span class="a1">css3 animation</span>
        <span class="a2">css3 animation</span>
        <span class="a3">css3 animation</span>
    </div>
</body>
</html>

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭