CSS3动画

CSS动画制作

变换样式（transform）
过渡样式（transition）
自定义动画（animate）
手册

变换样式(transform)

属性	描述
translate()	2D平移，第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translateX()	指定对象X轴（水平方向）的平移
translateY()	指定对象Y轴（垂直方向）的平移
rotate()	指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义
rotateX()	指定对象在x轴上的旋转角度
rotateY()	指定对象在y轴上的旋转角度
rotateZ()	指定对象在z轴上的旋转角度
scale()	指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scaleX()	指定对象X轴的（水平方向）缩放
scaleY()	指定对象Y轴的（垂直方向）缩放
skew()	指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewX()	指定对象X轴的（水平方向）扭曲
skewY()	指定对象Y轴的（垂直方向）扭曲
transform	复合属性。设置对象的变换
transform-origin	设置对象中的变换所参照的原点
transform-style	指定某元素的子元素是否位于三维空间内
perspective	perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图
perspective-origin	指定透视点的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D元素</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        html{
            height:100%;

            /* 背景色渐变属性 线性渐变 */
            background:linear-gradient(#ff0 0%, #000 80%);
        }

        body{
            text-align: center;
            padding-top:7em;
        }

        input{
            display: none;
        }

        label{
            display: inline-block;

            width:5em;
            height:3em;
            line-height:3em;
            text-align: center;
            border:1px solid #666;
            cursor: pointer;
            border-radius: 5px;
            margin-right:2em;

            transition:all linear .3s;
        }

        label:last-child{
            margin-right:0;
        }

        label:hover{
            transform:translateY(-10px);
            box-shadow: 0px 10px 20px 0px rgb(156, 154, 154);
            background-color:aqua;
        }


        .clear{
            height:10em;
        }


        /* 3D空间 */
        .views{
            width:250px;
            height:250px;
            /* border:1px solid red; */
            margin:0 auto;

            position: relative;

            /* 设置3D效果的距离 近大远小 */
            perspective: 1000px;
        }

        /* 3D的立体元素 */
        .box{
            width:100%;
            height:100%;

            /* 将元素以3D的效果显示 */
            transform-style: preserve-3d;

            /* 稍微的转换一下角度，看到不同的层面 */
            transform:rotateX(-15deg) rotateY(20deg);

            transition:all ease-in-out .3s;
        }

        /* 6个面 */
        .face{
            width:100%;
            height:100%;
            line-height:250px;
            font-size:2em;
            font-weight: bold;
            text-align: center;
            background-color:rgba(51, 51, 51, .1);
            border:1px solid #fff;
            position: absolute;
            left:0;
            top:0;
            box-shadow: 0px 0px 20px 0px #333;
            color:#fff;
            opacity: .6;
            transition:all ease-in-out .3s;
        }


        .front{
            transform:translate3d(0px, 0px, 125px);
        }

        .back{
            transform:rotateY(180deg) translate3d(0px, 0px, 125px);
        }

        .left{
            transform:rotateY(-90deg) translate3d(0px, 0px, 125px);
        }

        .right{
            transform:rotateY(90deg) translate3d(0px, 0px, 125px);
        }

        .top{
            transform:rotateX(90deg) translate3d(0px, 0px, 125px);
        }

        .bottom{
            transform:rotateX(-90deg) translate3d(0px, 0px, 125px);
        }


        input:checked + label{
            transform:translateY(-10px);
            box-shadow: 0px 10px 20px 0px rgb(156, 154, 154);
            background-color:aqua;
        }

        #front:checked ~ .views .box{
            transform:rotateX(-15deg) rotateY(20deg);
        }

        #back:checked ~ .views .box{
            transform:rotateX(-15deg) rotateY(200deg);
        }

        #left:checked ~ .views .box{
            transform:rotateX(-15deg) rotateY(110deg);
        }

        #right:checked ~ .views .box{
            transform:rotateX(-15deg) rotateY(-70deg);
        }

        #top:checked ~ .views .box{
            transform:rotateY(20deg) rotateX(-90deg);
        }

        #bottom:checked ~ .views .box{
            transform:rotateY(20deg) rotateX(90deg);
        }

        #big:checked ~ .views .box{
            transform:scale(2) rotateX(-15deg) rotateY(20deg);
        }

        #small:checked ~ .views .box{
            transform:scale(.5) rotateX(-15deg) rotateY(20deg);
        }

        #rotate:checked ~ .views .box{
            animation:rotate linear 6s infinite;
        }

        @keyframes rotate{
            0%{
                transform:rotateX(0deg) rotateY(0deg);
            }
            100%{
                transform:rotateX(360deg) rotateY(360deg);
            }
        }


        /* 展开 */
        #open:checked ~ .views .box .front{
            transform:translate3d(0px, 0px, 300px);
        }

        #open:checked ~ .views .box .back{
            transform:rotateY(180deg) translate3d(0px, 0px, 300px);
        }

        #open:checked ~ .views .box .left{
            transform:rotateY(-90deg) translate3d(0px, 0px, 300px);
        }

        #open:checked ~ .views .box .right{
            transform:rotateY(90deg) translate3d(0px, 0px, 300px);
        }

        #open:checked ~ .views .box .top{
            transform:rotateX(90deg) translate3d(0px, 0px, 300px);
        }

        #open:checked ~ .views .box .bottom{
            transform:rotateX(-90deg) translate3d(0px, 0px, 300px);
}
        }



    </style>
</head>
<body>
    <input type="radio" name="box" id="front" checked />
    <label for="front">正面</label>

    <input type="radio" name="box" id="back" />
    <label for="back">背面</label>

    <input type="radio" name="box" id="left" />
    <label for="left">左边</label>

    <input type="radio" name="box" id="right" />
    <label for="right">右边</label>

    <input type="radio" name="box" id="top" />
    <label for="top">上面</label>

    <input type="radio" name="box" id="bottom" />
    <label for="bottom">下面</label>

    <input type="radio" name="box" id="big" />
    <label for="big">放大</label>

    <input type="radio" name="box" id="small" />
    <label for="small">缩小</label>

    <input type="radio" name="box" id="rotate" />
    <label for="rotate">旋转</label>

    <input type="radio" name="box" id="open" />
    <label for="open">展开</label>

    <div class="clear"></div>

    <!-- 3D空间 -->
    <div class="views">
        <!-- 3D元素 -->
        <div class="box">
            <div class="face front">正面</div>
            <div class="face back">背面</div>
            <div class="face left">左面</div>
            <div class="face right">右面</div>
            <div class="face top">上面</div>
            <div class="face bottom">下面</div>
        </div>
    </div>
</body>
</html>

perspective-origin

<div class="wrapper w1">
    <div>1</div>
</div>
<div class="wrapper w2">
    <div>2</div>
</div>

.wrapper {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 10px;
    border: 1px solid #000;
    -webkit-perspective: 150px;   /*设置3D元素与3D页面间的距离*/
    perspective: 150px;        /*设置3D元素与3D页面间的距离*/
    -webkit-transform-style: preserve-3d;    /*设置元素的效果在3D空间内显示*/
    transform-style: preserve-3d;        /*设置元素的效果在3D空间内显示*/
}
.w1 {
    -webkit-perspective-origin: center top;
    perspective-origin: center top;
}
.w2 {
    -webkit-perspective-origin: center bottom;
    perspective-origin: center bottom;
}
.wrapper > div {
    width: 180px;
    height: 120px;
    margin: 40px 10px;
    background-color: #ccc;
    -webkit-transform: rotatex(90deg);
    transform: rotatex(90deg);
}

过渡样式(transition)

属性	描述
transition-property	设置对象中的参与过渡的属性
transition-duration	设置对象过渡的持续时间
transition-timing-function	设置对象中过渡的类型
transition-delay	设置对象延迟过渡的时间
transition	复合属性。设置对象变换时的过渡效果

<div class="demo"></div>


.demo{
    width:100px;
    height:100px;
    background-color:red;

    transition-property:all;    /*设置对象中的参与过渡的属性*/
    transition-duration:3s;        /*设置对象过渡的持续时间*/
    transition-timing-function:linear;    /*设置对象中过渡的类型*/
    transition-delay:2s;        /*设置对象延迟过渡的时间*/
    transition:all 3s linear 1s;    /*复合属性。设置对象变换时的过渡效果*/
}

.demo:hover{
    background-color:green;
    transform:rotate(300deg) skew(-20deg) scale(3.0) translate(100px,0);
}

自定义动画(animation)

属性	说明
animation-name	设置对象所应用的动画名称
animation-duration	设置对象动画的持续时间
animation-timing-function	设置对象动画的过渡类型
animation-delay	设置对象动画延迟的时间
animation-iteration-count	设置动画的播放次数
animation-direction	设置对象动画在循环中是否反向运动
animation-play-state	设置对象动画的状态
animation-fill-mode	设置对象动画时间之外的状态

<div class="demo"></div>

.demo{
    width:100px;
    height:100px;
    background-color:red;

    animation-name:demo;    /*设置对象所应用的动画名称*/

    animation-duration:3s;    /*设置对象动画的持续时间*/

    animation-timing-function:linear;    /*设置对象动画的过渡类型*/

    animation-delay:2s;        /*设置对象动画延迟的时间*/

    animation-iteration-count:infinite;     /*无限循环*/
    animation-iteration-count:5;        /*设置对象动画的循环次数*/

    animation-direction:normal;        /*正常方向*/
    animation-direction:reverse;    /*反方向运行*/
    animation-direction:alternate;    /*动画先正常运行再反方向运行，并持续交替运行*/
    animation-direction:alternate-reverse;/*动画先反运行再正方向运行，并持续交替运行*/

    animation-fill-mode:none;        /*默认值。不设置对象动画之外的状态*/
    animation-fill-mode:forwards;    /*设置对象状态为动画结束时的状态*/
    animation-fill-mode:backwards;    /*设置对象状态为动画开始时的状态*/
    animation-fill-mode:both;        
    /*
        设置对象状态为动画在播放之前或之后，其动画效果是否可见,
        both的运行轨迹:0%——动画运行中——100%;
        最后：animation-fill-mode的状态和animation-direction的值有关。 
        1、当animation-direction为normal 或 alternate时，和上面的状态相同。 
        2、当animation-direction为alternate-reverse 或reverse 时，状态刚好和上面相反。从100%到0%执行。
    */

    animation:demo 2s ease-out forwards;    /*复合属性。设置对象所应用的动画特效*/
}

@keyframes demo{
    from{background-color:red;}
    20%{background-color:pink;}
    40%{background-color:blue;}
    60%{background-color:yellow;}
    80%{background-color:black;}
    to{background-color:green;}
}

.demo:hover{
    animation-play-state:paused;  /*暂停*/
}