CSS3动画

最新推荐文章于 2024-04-12 03:36:31 发布

lelewang123

最新推荐文章于 2024-04-12 03:36:31 发布

阅读量355

点赞数

本文链接：https://blog.csdn.net/lelewang123/article/details/78175629

版权

现如今，CSS3动画在页面中的应用越来越广泛，它能使页面呈现出更加炫酷的效果。下面，总结一下CSS3动画的一些属性和特点。

CSS3的动画属性主要包含两部分，transition和animation。

transition

transition根据其含义，为：过渡。即由一种表现的状态变为另一种表现的状态，其中状态包括尺寸大小，颜色，字体，位置等属性的改变。
transition是个复合属性，和background一样，它包含几个子属性，分别是：
- transition-property：要改变的属性
  支持过渡的属性列表
- transition-duration：多长时间完成
  这个属性的值为一个带单位的数字，表示几秒完成该变化。
- transition-timing-function：怎样改变
  这个属性的值包括下列几个：
  * ease:速度逐渐放慢
  * ease-in：加速
  * ease-in-out：先加速后减速
  * ease-out：减速
  * linear：匀速
  详细解释见本链接
- transition-delay：要不要延迟，要得话要延迟多久
  在一行transition语句中，可以定义多个属性的变化，中间用“逗号”隔开。而delay则规定了这些不同属性的变化顺序。
实例：

div{
                width: 200px;
                height:200px;
                border-radius: 0 100%;
                background-image:url(https://cdn.pixabay.com/photo/2016/07/17/02/04/background-1523110__340.jpg);
                background-position: 20% 20%;
                transform:rotate(0deg);
                transition:2s border-radius ease,
                           1s 2s transform ease,
                           2s 2s background-position ease;                      ;

            }
            div:hover{
                border-radius: 100% 0;
                transform:rotate(360deg);
                background-position: 50% 50%;
                transition:2s border-radius ease,
                           1s 2s transform ease,
                           2s 2s background-position ease;      
            }

缺陷
1. 需要事件触发，不能在网页加载完成之后自动发生；
2. 不能规定中间态，只有起始位置和末位置；
3. 一条transition规则，只能定义一个属性的变化。

animation
为了解决transition的一些局限性，我们华丽丽的animation就出现啦！

animation也是一个复合属性，它同样包含很多子属性。
animation的子属性有以下几个：
- animation-delay：设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
- animation-duration：设置动画一个周期的时长。
  animation中若有两个被识别为时间的值，默认第一个分配给animation-duration，第二个被分配给animation-delay。
- animation-direction：设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
  - normal：默认，按照设置的次数，一遍完成之后回到初始位置再进行下一次的动画。
  - alternate：正向交替，动画从正向开始（类比织布机上的梭子）。
  - reverse：反向交互，从末位置到初位置，和normal正好相反。
  - alternate-reverse：反向交替，动画从反向开始。
- animation-name：动画的名字，指定由@keyframes描述的关键帧的名称。
- animation-timing-funtion：设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
- animation-fill-mode：指定动画执行前后如何为目标元素应用样式。它的值包括：
  - none：动画执行前后不改变任何样式
  - backwards：最后的展示保持动画的第一帧的样子
  - forwards：最后的展示保持动画的最后一帧的样子
  - both：动画将会执行 forwards 和 backwards 执行的动作。
- animation-play-state：允许暂停和恢复动画。属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。有两个值：running（当前动画正在进行）和pause（当前动画被停止）。
- animation-iteration-count：设置动画的执行次数，设置为具体的数字，支持小数，不带单位，若想要动画执行无限次，则设置infinite。