过渡、转换、动画

一、过渡

 过渡是元素从一个样式转变为另一个样式的效果

通过transition 属性来指定，

它的语法格式为： transition: 过渡属性 持续时间 运动曲线 延迟时间;

也可以把这个属性分开来写：

transition-property：指定要用于过渡的属性名称，如：width、height、background、......

      如果希望元素的多个属性都具有过渡的效果，那么我们就可以把过渡属性的值设置为 all 即可

 transition-duration：过渡持续时间，单位是秒。

transition-timing-function：过渡的的运行曲线，默认是 ease

      ease：默认值，逐渐慢下来 

      linear：匀速运动 

      ease-in：加速 

      ease-out：减速 

      ease-in-out：先加速后减速

transition-delay：延迟执行时间，单位为秒

添加过渡效果的代码需要放在你想要进行过渡的元素上

例如：

 结果：

        

二、转换之移动、旋转、缩放

在css3中， 通过使用 transform 可以实现元素的位移、旋转和缩放

位移：transform: translate()

旋转：transform: rotate()

缩放：transform: scale()

1）移动

使用 translate() 来进行指定，它需要通过 x坐标和 y坐标来确定移动的位置

语法格式有：

transform: translate(x, y);  在x坐标和 y坐标上移

transform: translateX(n);  只在x坐标上移动

transform: translateY(n);  只在y坐标上移动

如果x的值是正值，则往右移动，负值往左移动

如果y的值是正值，则往下移动，负值往上移动

x和y轴的值要带单位，一般使用像素（px）

结果：

 

 

2）旋转

 使用 rotate() 来实现，进行旋转时需要指定旋转的角度，而所使用的角度的单位是 deg

语法格式为：

transform: rotate(数字deg);

 默认情况下旋转是以元素的中心位置为旋转点来旋转的

如果想指定旋转的中心 点的位置，可以使用 transform-origin: x,y 来指定

3）缩放

使用 transform: scale() 来实现

语法格式为：

transform: scale(x, y)

只写一个参数时，第二个参数则和第一个参数一样，相当于 scale(x,x) 

x和y的取值说明：

如果值为 1 表示不放大也不缩小

如果值大于 1 表示放大

如果值小于 1 表示缩小

x和y的值是原大小的位数。

案例之分布按钮：

 结果：

 

三、动画

动画和过度最大的区别是：动画可以实现更多变化，更多控制，连续自动播放等效果

要想使用动画，那么首先浏览器必须是高版本的

需要通过 @keyframe 来定义动画，定义好动画后，通过 animation 属性来指定动画名称

定义动画时，需要告诉它这个动画将如何安完成

1. 开始状态 from ，也可以使用 % 百分比来指定

2. 结束状态 to

animation有以下属性：

1.动画的名称 -- animation-name:

2.持续时间 -- animation-duration:

3.动画曲线 -- animation-timing-function:

4.延迟时间 -- animation-delay:

5.是否可以逆向播放 -- animation-direction:

       默认是normal,动画执行到最后会直接加到开始处

                  alternate逆播放，动画执行到最后会反着播放。

6.动画执行次数 -- animation-iteration-count:

       次数可以是整数，也可以是 infinite 表示一直循环

7.动画的状态 -- animation-fill-mode:

       有两个值可以指定：保持forwards，回到起始backwards

8.规定动画是否正在运行或暂停 -- animation-play-state:

       这个需要单独使用，

       有两个值:  running: 运行状态，默认值

                         paused: 暂停状态