css动画

html:

1 <div class="container">
2     <img src="./1.png" class="img">
3 </div>

css:

.container{
            width: 500px;
            height: 200px;
            background-color: yellow;
            text-align: center;
        }

        .img{
            animation: transform 2.5s linear infinite forwards;
        }

        .img:hover{
            animation-play-state: paused;
        }

        /*4个时间段，0%到25%，从最低点到左上;25%到50%，从左上到最低点；50%到70%，从最低点到右上;70%到100%,从右上到最低点*/
        @-webkit-keyframes transform { 
            0% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
            25% {transform-origin:top center;-webkit-transform:rotate(20deg);transform:rotate(20deg);}
            50% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
            75% {transform-origin:top center;-webkit-transform:rotate(-20deg);transform:rotate(-20deg);}
            100% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
        }
        @keyframes transform { 
            0% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
            25% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(20deg);transform:rotate(20deg);}
            50% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
            75% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(-20deg);transform:rotate(-20deg);}
            100% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
        }

效果:

posted @ 2019-06-13 20:52  wlxian  阅读(149)  评论(0)  编辑  收藏  举报