css3动画

最新推荐文章于 2022-12-15 14:38:50 发布

九月有清晨

最新推荐文章于 2022-12-15 14:38:50 发布

阅读量120

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/April_Chen/article/details/93871489

版权

CSS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

创建动画过程（@keyframes）就是定义动画的开始和结束。
写法：

@keyframes 动画过程的名字{
             from(动画的开始样式){
                transform: rotate(0deg);
             }
             to(动画的结束样式）{
                transform: rotate(180deg);
             }
}

例如：

@keyframes myA {
        from{
            top:5px
        }
        to{
            top:-5px
        }
}
.box{
     position: relative;
     width: 100px;
     height:200px;
     background: pink;
     /*2.使用创建的动画
     写法：animation:动画过程名称 动画播放总时长
     */
    /* animation:myA 1s;*/
     /*使用动画的可选参数
     写法：animation:动画过程名称 动画播放总时长
     动画延迟播放时间  播放的次数(无限次数infinite)
     */
     animation: myA 0.5s 0s infinite;
}

动画的扩展的写法：

/*通过百分比来定义动画的过程*/
 @keyframes myA {
     0%{transform:translateY(5px);}
     20%{transform:translateY(-5px);}
     40%{transform:translateY(5px);}
     60%{transform:translateY(-5px);}
     80%{transform:translateY(5px);}
     100%{transform:translateY(0);}
 }
 .box{
     position: relative;
     width: 100px;
     height:200px;
     background: pink;
 }
 .box:hover{
     animation: myA 0.8s;
 }