CSS3动画属性(Animation)

大聪明码农徐

已于 2022-01-26 12:42:06 修改

阅读量486

点赞数 1

分类专栏：前端HTML与CSS 文章标签： css3 动画 css

于 2022-01-26 12:31:09 首次发布

本文链接：https://blog.csdn.net/qq_45799465/article/details/122698730

版权

前端HTML与CSS 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

注意：Animation-->在这个动画之前，先看Keyframes关键帧，支持animation动画的只有webkit内核的浏览器。

语法：

<style>

/*注意 mymove 是名字可以任意取值，最好见名知意 */

/*第一种*/
@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
/*第二种*/
@keyframes mymove{
0%{初始属性状态}
100%{结束属性状态}
}
</style>

animation动画属性
animation-name:mymove;	是用来定义一个动画的名称,mymove是由Keyframes创建的动画名 mymove要和Keyframes中的mymove一致
animation-duration	运动时间默认是 0s
animation-delay	延迟时间默认是 0s
animation-timing-function	动画的播放方式，具有以下六种变换方式：ease;ease-in;ease-in-out;linear;cubic-bezier，steps（)；
animation-iteration-count	是用来指定元素播放动画的循环次数，其可以取值<number>为数字，其默认值为“1”；infinite为无限次数循环。
animation-direction	定义是否应该轮流反向播放动画。如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放

代码展示：

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 800px;
            background-color: skyblue;
            border-bottom: rgb( 0,121,158) solid 100px;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 相对定位 */
            position: relative;
        }
        .box div{
            width: 100px;
            height: 100px;
            background-color: crimson;
            /* 绝对定位 */
            position: absolute;
            /* 水平居中 */
            left: calc(50% - 50px) ;
            bottom: -100px;
            /* 50%圆角 */
            border-radius: 50%;
            /* 盒子阴影 */
            box-shadow: 0px 0px 20px 10px yellow;
            /* 调用动画 ，动画名为mymove */
            animation: mymove;
            /* 运动时间为5秒 */
            animation-duration: 5s;
            /* 延迟时间为2秒 */
            animation-delay: 2s;
            /* 运动方式为匀速运动 */
            animation-timing-function: ease;
            /* 循环次数为无限次 */
            animation-iteration-count: infinite;
            /* 设置2,4,6,8,10...为反向播放动画 */
            animation-direction:alternate;
        }
        @keyframes mymove {
            0%{
                /* 重新设置定位的位置以及盒子阴影属性 */
                bottom: -100px;
                box-shadow: 0px 0px 20px 10px yellow;
            }
            20%{
                bottom: 0px;
                box-shadow: 0px 0px 30px 20px yellow;
            }
            40%{
                bottom: 100px;
                box-shadow: 0px 0px 40px 30px yellow;
            }
            60%{
                bottom: 200px;
                box-shadow: 0px 0px 50px 40px yellow;
            }
            80%{
                bottom: 300px;
                box-shadow: 0px 0px 60px 50px yellow;
            }
            100%{
                bottom: 400px;
                box-shadow: 0px 0px 70px 60px yellow;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
        </div>
    </div>
</body>

运行结果：

animation和transition的区别？

相同点：都是随着时间改变元素的属性值。

不同点：

transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；

而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。

transition属性详情请查看我的博客文章 “css3过渡属性”

码字不易点个赞再走吧~~~

大聪明码农徐

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3动画属性(Animation)

注意：Animation-->在这个动画之前，先看Keyframes关键帧，支持animation动画的只有webkit内核的浏览器。语法：<style>/*注意 mymove 是名字可以任意取值，最好见名知意 *//*第一种*/@keyframes mymove{from{初始状态属性}to{结束状态属性}}/*第二种*/@keyframes mymove{0%{初始属性状态}100%{结束属性状态}}</style>animatio
复制链接

扫一扫