CSS之动画

最新推荐文章于 2025-05-28 16:06:45 发布

爱编译也爱吃肉的喵

最新推荐文章于 2025-05-28 16:06:45 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css学习笔记

本文链接：https://blog.youkuaiyun.com/zn740395858/article/details/77988670

css学习笔记专栏收录该内容

8 篇文章

订阅专栏

       最近在学习饿了么vue的demo，接触到了挺多css3动画，之前有学习过，但更多是需要了就拿出来看看，直接上手用，今天来对三种动画属性进行系统学习。

css3动画主要包括Transform、Transition、Animation。

区别

transition：允许css的属性值在一定的时间区间内平滑地过渡。需要触发一个事件（hover事件或者click事件）才会随时间改变其css属性。
animation：不需要触发任何时间的情况下也可以显示地随时间变化来改变元素css的属性值，从而达到动画效果

animation

属性

1、animation-name：用来定义一个动画的名称，这边的name必须和@keyframes的name一致
2、animation-duration：指定元素播放动画所持续的时间长，单位为：s，默认值为：0
3、animation-timing-function：动画的播放方式

ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease-in：（加速），ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)

4、animation-delay：指定元素动画开始的时间，也就是说当改变元素属性值后多长时间开始执行animation效果。单位为：s，默认为：0
5、animation-iteration-count：指定元素播放动画的循环次数，默认为：1，infinite：无限次数循环
6、animation-direction：指定元素动画播放的方向。默认值为：normal，动画的每次循环都是向前播放；另一个值为：alternate，动画播放在第偶数次向前播放，第奇数次向反方向播放。
7、animation-play-state：控制元素动画的播放状态。两个值：running和paused，其中running为默认值。
这里写图片描述

keyframes

关键帧，将指定时间段内的动画划分的更为精细一些

@keyframes animationname {
    keyframes-selector {
        css-styles;
    }
}

.animationname:声明动画的名称。
keyframes-selector:用来划分动画的时长，可以使用百分比形式，也可以使用 “from” 和 “to”的形式。”from” 和 “to”的形式等价于 0% 和 100%。

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

@keyframes mymove
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

由于keyframes较难理解，在此用了w3school中的一个案例进行分析@keyframes 规则,具体效果可以点击链接进行查看。
keyframes跟flash类似，每一次的百分比就如同flash中的每一个帧，但是flash是需要每一帧每一帧进行动画效果比拟，而keyframes随时间变化来改变元素css的属性值，百分比是指在动画时间内的百分之多少进行变化。
在此案例中：animation:mymove 5s infinite;设置了动画名称为mymove，所持续时间为5s，无限循环。
则keyframes中的百分比（0%，25%，50%，75%，100%）就对应着（0s，1.25s，2.5s，3.75s，5s）

当执行到0s时，top:0px; left:0px; background:red;
当执行到1.25s时，top:0px; left:100px; background:blue;
当执行到2.5s时，top:100px; left:100px; background:yellow;
当执行到3.75s时，top:100px; left:0px; background:green;
当执行到5s时，top:0px; left:0px; background:red;

在整个动画过程中，动画后面的会覆盖前面的属性值。动画结束后样式会回到默认效果。在每一个百分比的css样式会有一个animation渐变过程，让元素达到一种在不断变化的效果。