码迷,mamicode.com
首页 > 移动开发 > 详细

css3 移动端旋转动画暂停

时间:2018-05-08 19:35:23      阅读:584      评论:0      收藏:0      [点我收藏+]

标签:str   radius   ext   box   暂停   idt   frame   turn   end   

 音乐播放图片旋转动画 ios不支持暂停: animation-play-state: paused;

@-webkit-keyframes rotate{
    100% {
           transform: rotate(1turn);
        }
}
.img-wrapper{
    width: 200px;    
    height: 200px;
    margin: 50px auto 0;
    overflow: hidden;
    border-radius: 100px;
}
.animation-start{
    animation: rotate 5s linear infinite;
}
.suspended{
    animation-play-state: paused;
}
.img-wrapper img{
    width: 100%;
    border-radius: 100px;
}
.btn{
                width: 100%;
                height: 30px;
                box-sizing: border-box;
                text-align: center;
                margin-top: 20px;
                line-height: 30px;
                bottom: 100px;
                border: 1px solid #ccc;
            }

 

css3 移动端旋转动画暂停

标签:str   radius   ext   box   暂停   idt   frame   turn   end   

原文地址:https://www.cnblogs.com/lvshaonan/p/9009891.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!