CSS3动画animation相关属性与关键帧规则keyframes

最新推荐文章于 2023-11-06 11:31:21 发布

刻刻帝丶

最新推荐文章于 2023-11-06 11:31:21 发布

阅读量7k

点赞数 5

分类专栏： Web前端 CSS/CSS3 CSS3 文章标签： css3 动画过渡

本文为博主原创文章，转载请添加原文地址，需要大厂内推的+我脉脉哦：丛培森

本文链接：https://blog.csdn.net/q1056843325/article/details/53308506

版权

本文介绍了CSS3的animation属性和@keyframes规则，通过实例详细解析了如何创建动画效果，包括动画名称、时长、速度曲线、延迟、播放次数、方向、填充模式和播放状态等关键概念。

摘要由CSDN通过智能技术生成

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

我昨天写三维正方体的时候，就用到了动画的语法
今天就来系统复习一下
过渡transition有着它的局限性
虽然简单，但是它只能在两个状态之间改变
并且它需要事件的驱动才能够进行
不能够自己运动
所以为了解决这样的问题
我们需要animation动画
#动画#
若想实现动画效果
仅仅有animation属性是不够的
我们还需要@keyframes规则
先来看一个例子

div class="demo"></div>

.demo {
   
    width: 100px;
    height: 100px;
    background-color: gold;
}
.demo:hover {
   
    animation: change 2s linear;
}
@keyframes change {
   
    0% {
   
        background-color: red;
    }
    50% {
   
        background-color: purple;
    }
    100% <