CSS3——动画

最新推荐文章于 2024-08-10 16:57:53 发布

墨承天

最新推荐文章于 2024-08-10 16:57:53 发布

阅读量209

点赞数

文章标签： css3 动画 html5

本文链接：https://blog.csdn.net/DS153/article/details/120124271

版权

前言

再经过HTML5和CSS3的进阶训练之后，我学会了使用很多制作动画效果的内容。其中包括了包括了2D转换，动画，3D转换的学习。这里来仔细来讲解一下关于动画属性使用的种种好玩的地方。

一、动画

动画是什么？动画(animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果。动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数。用百分比来规定变化发生的时间，或用 from和to，等同于 0% 和 100%

二、使用动画

动画的使用就是先定义动画，然后再调用定义的动画。它们的语法格式一般分成两部分。

定义动画：

@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}

调用动画：

div {
   /* 调用动画 */
animation-name: 动画名称;
    /* 持续时间 */
    animation-duration: 持续时间；
}

比如这里我列出我所制作的奔跑的熊的代码：

    body {
        background-color: #cccccc;
    }
    
    .bear {
        position: absolute;
        bottom: 20px;
        width: 200px;
        height: 100px;
        background: url(img/bear.png) no-repeat;
        animation: bear 1s steps(8) infinite, move 2s linear forwards;
        z-index: 9999;
    }
    
    @keyframes bear {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: -1600px 0;
        }
    }
    
    @keyframes move {
        0% {
            left: 0;
        }
        100% {
            left: 50%;
            transform: translateX(-50%);
        }
    }
</style>

<body>
    <div class="bear"></div>
</body>

我们就可以得到这样的一个奔跑的熊：

在这里我们定义了一个bear的动画，然后在bear的盒子里面去调用动画，就可以实现这个效果。

三、动画属性

动画都有这样的一些属性是需要注意的：

我们可以看到有非常多的属性。除了第一个是用于定义动画的，剩下的属性需要写进animation里。简写的方式是：

animation：动画名称动画时间运动曲线何时开始播放次数是否反方向动画等待或者结束状态；

1.简写属性里面不包含 animation-play-state
2.暂停动画animation-paly-state: paused经常和鼠标经过等其他配合使用。
3.要想动画走回来，而不是直接调回来：animation-direction: alternate
4.盒子动画结束后，停在结束位置：animation-fill-mode: forwards

这里需要注意，animation-timing-function是规定动画的速度曲线，默认是ease，这里用到了制作小熊奔跑的属性steps，这里希望大家理解一下用法。

linear：动画从头到尾的速度是相同的。匀速
ease：默认。动画以低速开始，然后加快，在结束前变慢
ease-in：动画以低速开始。
ease-out：动画以低速结束。
ease-in-out：动画以低速开始和结束。
steps()：指定了时间函数中的间隔数量（步长）

不了解的属性可以自己使用案例去测试，然后得出自己想要的效果。

总结

动画的使用通常用于首页和各种地方的使用。很多使用还是2D转换配合过渡使用的动画，3D动画的过程可能更多，但是动画的优势在于你可以去定义更加复杂的内容去实现更加有趣的页面效果。希望大家能够熟练的掌握这个内容。最后希望可以给我一个一键三连。

墨承天

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3——动画

目录前言一、动画二、使用动画三、动画属性总结前言再经过HTML5和CSS3的进阶训练之后，我学会了使用很多制作动画效果的内容。其中包括了包括了2D转换，动画，3D转换的学习。这里来仔细来讲解一下关于动画属性使用的种种好玩的地方。一、动画动画是什么？动画(animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果。动画是使元素从一个样式...
复制链接

扫一扫