过渡和动画

一过渡

1.1过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• 指定要添加效果的CSS属性

• 指定效果的持续时间。

1.2多项改变

要添加多个样式的变换效果，添加的属性由逗号分隔。

例如：

transition: width 2s, height 2s, transform 2s;

1.3速度曲线

transition-timing-function 属性规定过渡效果的速度曲线。

transition-timing-function 属性可接受以下值：

• ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）

• linear - 规定从开始到结束具有相同速度的过渡效果

• ease-in -规定缓慢开始的过渡效果

• ease-out - 规定缓慢结束的过渡效果

• ease-in-out - 规定开始和结束较慢的过渡效果

• cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

1.4延迟过渡效果

transition-delay 属性规定过渡效果的延迟（以秒计）。

1.5简写属性

transition:过渡的属性、花费时间、运动曲线、延迟时间

二动画

2.1什么是动画

动画使元素逐渐从一种样式变为另一种样式。

您可以随意更改任意数量的 CSS 属性。

如需使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

2.2 @keyframes

例如

/* 动画代码 */
@keyframes example1 {
    from {
        background-color: red;
    }
    to {
        background-color: yellow;
    }
}
/* 应用动画的元素 */
.example1 {
    animation-name: example1;
    animation-duration: 4s;
}

2.3延迟动画

animation-delay: 2s;

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。

2.4 运行次数

animation-iteration-count 属性指定动画应运行的次数。

2.5反复或交替运行

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction 属性可接受以下值：

• normal - 动画正常播放（向前）。默认值

• reverse - 动画以反方向播放（向后）

• alternate - 动画先向前播放，然后向后

• alternate-reverse - 动画先向后播放，然后向前

2.6速度曲线

animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

• ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）

• linear - 规定从开始到结束的速度相同的动画

• ease-in - 规定慢速开始的动画

• ease-out - 规定慢速结束的动画

• ease-in-out - 指定开始和结束较慢的动画

• cubic-bezier(*n*,*n*,*n*,*n*) - 运行您在三次贝塞尔函数中定义自己的值

2.7填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

• none - 默认值。动画在执行之前或之后不会对元素应用任何样式。

• forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。

• backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。

• both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

2.8简写属性

animation: 名称、花费时间、运行曲线、延迟时间、循环次数、是否反方向、结束后的状态

infinte:无限循环

alternate:反方向

forwards:停留在结束状态