网页动画

css变形：transform
平移 translate（x,y）
translateX
translateY
transform:translate(100px,0)

旋转 rotate(deg) 旋转多少度，不会改变元素的形状

缩放 scale（x,y）如果只书写了一个值，默认第2个参数等于第一个值
scaleX
scaleY

倾斜 skew（x,y） deg 会改变元素的形状
skewX
skewY

如果说我们想给一个元素同时设置多个变形属性！
transform：倾斜缩放旋转；
多个属性之间使用空格隔开！

我们上面的变形属性都是一瞬间就完成了！没有看到中间过程！

如果想看到！使用css过渡属性 transition==>是一个动画的转换过程！

css过渡属性：
transition:property duration timing-function delay

property:过渡或者动画的css属性,例如color,width,如果想都设置使用all
duration:完成过渡效果需要的时间 s为单位
timing-function: 过渡函数
ease：默认值速度由快到慢
linear：匀速
ease-in:越来越快
ease-out:越来越慢
ease-in-out:先加速后减速
delay：过渡开始的延迟时间 s为单位

CSS动画

01.创建关键帧
@keyframes 名称(animates){
0%{
css属性：属性值；
}
50%{
css属性：属性值；
}
100%{
css属性：属性值；
}
}
02.怎么调用关键帧
animation：关键帧的名称 3s linear 1s;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css3变形</title>

    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        li{
            list-style: none;
            float: left;
            margin-left: 15px;
            background: rgba(230,130,0,0.5);
            border-radius: 5px;/*圆角属性*/
        }

        li:hover{
            /*transform 变形属性*/
            /* transform:translate(4px,5px) ;平移*/
            transform: rotate(90deg) scale(1.5);/* 旋转的同时放大1.5倍*/
            /*  transform: skewY(20deg);
             transform: skewX(20deg); 倾斜属性*/
        }

        a{
            text-decoration: none;
        }

        a:hover{
            background: rgba(150,230,100,0.5);
            border-radius: 5px;
        }



    </style>
</head>
<body>
<ul>
    <li><a href="#">服装城</a></li>
    <li><a href="#">美妆馆</a></li>
    <li><a href="#">超市</a></li>
    <li><a href="#">全球购</a></li>
    <li><a href="#">闪购</a></li>
    <li><a href="#">团购</a></li>
    <li><a href="#">拍卖</a></li>
    <li><a href="#">金融</a></li>
</ul>
</body>
</html>

css3变形

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3过渡</title>

    <style type="text/css">
               *{
            margin: 0px;
            padding: 0px;
        }


        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            transition:all  3s linear 2s;
            /**
            all：    transition-property
            3s :     transition-duration
            linear:  transition-timing-function
            2s:      transition-delay
            */
        }

        div:hover{
            background-color: red;
            font-size: 25px;
            transform: rotate(90deg) scale(1.5); /*旋转的同时放大1.5倍  这两个效果 一次性到位*/
            /*transition属性的值：
             01.transition-property:过渡的css属性的名称（color,font-size,background）等！
                                想给多个属性设置过渡效果，使用all！
             02.transition-duration:过渡效果需要的时间！
             03.transition-timing-function:设置速度曲线！
                         ease：慢速开始，之后变快！
                       linear：匀速!
                       ease-in:慢速开始！
                       ease-out:慢速结束！
             04.transition-delay:过度效果开始前需要等待的时间！默认 0s!
            */
        }



    </style>
</head>
<body>
<div>
    大家辛苦了！
</div>
</body>
</html>

CSS3过渡

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3动画</title>
    <style type="text/css">
        div{
            height: 50px;
            width: 50px;
            background: pink;
            /*调用动画*/
            animation:animates 5s linear 1s 2;
        }
        /*创建 关键帧*/
        @keyframes animates{
            0%{
                width: 0px;
                transform: translate(50px,0);
            }
            25%{
                width: 25px;
                height: 25px;
                transform: translate(150px,0) rotate(90deg);
            }
            50%{
                width: 50px;
                height: 50px;
                transform: translate(300px,0) rotate(180deg);
            }
            75%{
                width: 25px;
                height: 25px;
                transform: translate(150px,0) rotate(270deg);
            }
            100%{
                width: 50px;
                height: 50px;
                transform: translate(50px,0) rotate(360deg);
            }
          }



    </style>


</head>
<body>
  <div></div>
</body>
</html>

CSS3动画