随堂练习

动画练习

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	指定透视点的位置

过渡样式(transition)

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

案例效果

<!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>Document</title>
    <style>
        .div1{
            height: 200px;
            width: 200px;
            background-color: antiquewhite;
            transition-property:all;    /*设置对象中的参与过渡的属性*/
            transition-duration:3s;        /*设置对象过渡的持续时间*/
            transition-timing-function:ease-in-out;    /*设置对象中过渡的类型*/
            transition-delay:1s;        /*设置对象延迟过渡的时间*/
        }
        .div1:hover{
            /* translate()    平移，第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 */
           transform: translate(100px,100px);
        }
        .div2{
            height: 200px;
            width: 200px;
            background-color: rgb(226, 250, 215);
            transition: all 3s ease-in-out 1s;     /*复合属性。设置对象变换时的过渡效果*/
        }
        .div2:hover{
            /* translateX()    指定对象X轴（水平方向）的平移 */
            /* translateY()    指定对象Y轴（垂直方向）的平移 */
           transform: translateX(100px);
        }
        .div3{
            height: 200px;
            width: 200px;
            background-color: rgb(215, 250, 245);
            transition: all 3s ease-in-out;
            /* 以右下角为原点 */
            transform-origin: right bottom ;
        }
        .div3:hover{
            /* rotate()    rotation旋转需先有 <' transform-origin '> 属性的定义 */
            /* rotateX()    指定对象在x轴上的旋转角度   
            rotateY()    指定对象在y轴上的旋转角度  
             rotateZ()    指定对象在z轴上的旋转角度 */
           transform: rotateY(180deg) rotateX(180deg); 
        }
        .div4{
            height: 200px;
            width: 200px;
            background-color: antiquewhite;
            transition: all 3s ease-in-out;
        }
        .div4:hover{
         /* scale()    scale缩放。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则取第一个参数的值 */
           transform: scale(1.5);
        }
          .div5{
            height: 200px;
            width: 200px;
            background-color: rgb(250, 215, 231);
            transition: all 3s ease-in-out;
        }
        .div5:hover{
           transform: scale(0.5);
        }
         .div6{
            height: 200px;
            width: 200px;
            background-color: rgb(218, 250, 215);
            transition: all 3s ease-in-out;
        }
        .div6:hover{
            /* scaleX()    指定对象X轴的（水平方向）缩放 */
            /* scaleY()    指定对象Y轴的（垂直方向）缩放 */
           transform: scaleX(0.5);
        }
        .div7{
            height: 200px;
            width: 200px;
            background-color: rgb(215, 243, 250);
            transition: all 3s ease-in-out;
        }
        .div7:hover{
            /* skew斜切扭曲。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 */
           transform: skewX(100deg);
        }
        .div8{
            height: 200px;
            width: 200px;
            background-color: rgb(250, 215, 215);
            transition: all 3s ease-in-out;
        }
        .div8:hover{
            /* skewX()    指定对象X轴的（水平方向）扭曲 */
            /* skewY()    指定对象Y轴的（垂直方向）扭曲  */
           transform: skewY(100deg);
        }

          /* 3D空间 */
          .views{
            width:250px;
            height:250px;
            margin:0 auto;
            position: relative;
            perspective: 1000px; /* 设置3D效果的距离 近大远小 */
        }

        /* 3D的立体元素 */
        .box{
            width:100%;
            height:100%;
            transform-style: preserve-3d;/* 将元素以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);}
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>
    <div class="div7"></div>
    <div class="div8"></div>

    <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>

自定义动画(animation)

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

案例效果

<!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>Document</title>
    <style>
        .div1{
            height: 100px;
            width: 100px;
            background-color: rgb(184, 213, 238);
            animation: donghua 5s infinite linear ;
        }
        .div1:hover{
            animation-play-state:paused; 
        }
        @keyframes donghua{
            0%{
                transform:rotate(0deg) ;
                background-color: antiquewhite;
            }
            50%{
                transform:rotate(180deg) ;
                background-color: black;
            }
            100%{
                transform:rotate(0deg) ;
                background-color: rgb(215, 226, 250);
            }
        }

        .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;        

            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;  /*暂停*/
        }

    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="demo"></div>
</body>
</html>