02-CSS基础与进阶-day13_2018-09-21-20-05-21

css3动画
@keyframes 动画名 {
0%
{

}
100%
{

}
}

元素执行动画
animation: 动画名运动时间运动曲线

01运动的汽车.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        img {

            animation: move 5s infinite;

        }

        /*定义动画*/

       @keyframes move {

           0% {

                 transform: translate3d(0,0,0);

           }

           50% {

                 transform: translate3d(800px,0,0);

           }

           51% {

                 /*多组变形 空格隔开即可*/

                 transform: translate3d(800px,0,0) rotateY(180deg);

           }

           100% {

                 transform: translate3d(0,0,0) rotateY(180deg);

           }

       }

    </style>

</head>

<body>

    <img src="car.jpg" alt="" width="100" />

</body>

</html>

巴特西

02-CSS基础与进阶-day13_2018-09-21-20-05-21

最新文章

热门文章