css动画2张图过渡

css动画2张图过渡

今天我们学习的内容有：过渡，动画，转换，伸缩盒子。

可以说今天学习的内容都是重量级的大佬，学好了，使用css3做出酷炫的效果 So Easy！~~

1.过渡

在css3中，有一个属性可以设置过渡效果。

它就是transition，所谓的过渡效果，指的就是以动画的形式慢慢演化样式属性变化的过程。

A.案例：通过transition设置焦点过渡效果

Document

注意页面中的代码：

第一，我们给div添加了一个hover伪类样式，当我们鼠标悬停在div上方的时候，会给div盒子添加一个蓝色的盒子阴影。

第二，我们给div盒子添加了一个transition样式，设置的值为：all 1s linear 0.3s;

这四个数据分别对应

transition-property(需要过渡的属性)：如果设置为all表示所有样式属性都需要过渡。

transition-duration(过渡的时间):以秒作为单位，设置过渡的时间

transition-timing-function(过渡的方式):常用的有linear(匀速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等

transition-delay(延迟的时间):以秒作为单位进行延迟，延迟之后开始进行过渡效果。

所以，我们通过transition这个复合属性设置的过渡效果为：

all:需要过渡所有的属性

1s:过渡的时间为1秒

linear:匀速过渡

0.3s:在延迟0.3秒之后开始过渡动画。

如果大家理解了上面的描述，那么也就不难理解咱们鼠标放到div上之后，为啥会慢慢出现蓝色的光晕了，就是因为咱们添加了过渡，所以，慢慢的就会给盒子添加阴影效果。

2.动画：

在学习完了过渡之后，发现咱们可以使用transition去以动画的形式展示样式的改变以及变化的过程，这可以帮助我们来实现一些过渡的动画。

但是，有的时候，我们的需求会更加的复杂，要求会更加的多变，那么，transition可能就无法满足我们的需要了，我们需要有更加炫酷，复杂的效果呈现。

那么，动画animation就可以满足我们的需要。

Document

代码效果如下：

同样，让我们来关注编写的代码：

1.在样式中，首先我们使用@keyframes 来定义了一个复杂的动画，在css3中，新增了@keyframes可以来帮助我们添加动画。代码如下：

/*动画的名字叫做moveAndChange*/

@keyframes moveAndChange{

/*动画最初的时候