自定义动画

最新推荐文章于 2020-09-04 09:00:12 发布

weixin_46174967

最新推荐文章于 2020-09-04 09:00:12 发布

阅读量361

点赞数

本文链接：https://blog.csdn.net/weixin_46174967/article/details/104116133

版权

自定义动画(也叫关键帧动画)： 其中，制作动画和绑定动画两个过程缺一不可
备注:
1）衣服可以制作很多件
2）同一件衣服也可以给多个人穿

绑定动画
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name ：动画名称必填
animation-duration：动画执行所需的时间必填
animation-timing-function：动画执行的速度曲线可选默认值 ease
animation-delay：动画开始之前的延迟可选默认值 0s
animation-iteration-count ：动画执行的次数可选默认值1 没有单位 infinite:无限次
animation-direction：规定是否轮流反向播放 (注意：播放次数至少为2) 可选默认不反向,alternate：反向播放
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

制作动画
@keyframes 声明自定义动画的关键词后面需要写自定义动画的名称，空格间隔

 .kuang{
            width: 500px;
            height: 500px;
            border: 1px solid;
            margin: 100px auto;
        }
        .ball{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #00AAFF;
       animation: myAnimation 3s ease-in-out 4s infinite alternate;
        }
           @keyframes myAnimation{
            /*from{} 相当于 0%*/
            /*to{}  相当于 100%*/
            0%{}
            25%{
                transform: translateX(400px);
            }
            50%{
                transform: translate(400px,400px);
            }
            75%{
                transform: translate(0px,400px);
            }
            100%{
                /*transform: translate(-200px,600px);*/
            }
            }