css学习记录4

过度

指元素从一个状态变为另一个状态的过程

使用transition 属性来指定，其语法为： transition: 过渡属性 持续时间 运动曲线 延迟时间;

可以使用 transition 来简写，也可以把这个属性分开。

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

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

transition-timing-function：过渡的的运行曲线，默认是 ease 除此之外还有linear（匀速运动）  ease-in（加速）  ease-out（减速 ）ease-in-out（先加速后减速）

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

例

.box {
            width: 100px;
            height: 100px;
            background: blueviolet;
            transition: all 2s linear;
        }

转换

使用 transform 来实现，可以实现元素的位移、旋转和缩放。

位移：transform: translate()

旋转：transform: rotate()

缩放：transform: scale()

位移

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

其语法为：

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

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

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

注意 x和y均可以指定正值或负值，如果x的值是正值，则往右移动，负值往左移动。如果y的值是正值，则往下移动，负值往上移动。 x和y轴的值要带单位，一般使用像素（px）

旋转

旋转使用 transform: rotate() 来实现

其语法为transform: rotate(数字deg);

注意：默认情况下旋转是以元素的中心位置为旋转点来旋转的。如果想指定旋转的中心 点的位置，可以使用 transform-origin: x,y 进行指定。

例

.box {
            width: 200px;
            height: 200px;
            background-color: red;
            transform-origin: 100px 100px;
            transform: rotate(45deg);
        }

缩放

缩放使用 transform: scale() 来实现

 其语法格式为： transform: scale(x, y)

其中如果x，y的值为 1 表示不放大也不缩小 如果值大于 1 表示放大 如果值小于 1 表示缩小 x和y的值是原大小的位数。

例如

 transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大 -

transform:scale(2,2) ：宽和高都放大了2倍

 transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2) 

 transform:scale(0.5, 0.5)：缩小 x和y的取值

其中如果值为 1 表示不放大也不缩小 如果值大于 1 表示放大 如果值小于 1 表示缩小 x和y的值是原大小的位数。

动画

动画，也是CSS3中提供一个功能。它和过度最大的区别是：动画可以实现更多变化，更多控制，连续自动播放等效果。

注意 要想使用动画，浏览器必须是高版本的。

首先使用动画之前，需要通过 @keyframe 来定义动画再通过 animation 属性来指定动画名称即可。

它的语法格式为： animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

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

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

2. 结束状态 to 注意：要想元素具有动画效果，除了定义好动画并运用外，还需要给这个元素进行绝对定义。 animation是动画的简写方式，它里面有很多的属性。

它的语法格式为： animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

animation-name: 动画的名称

animation-duration: 持续时间

animation-timing-function:动画曲线

animation-delay: 延迟时间

animation-direction:是否可以逆向播放  默认是“normal”动画执行到最后会直接加到开始处 alternate逆播放，动画执行到最后会反着播放。

animation-iteration-count: 动画执行总人数 次数可以是整数，也可以是 infinite 表示一直循环

animation-fill-mode:动画的状态 有两个值可以指定：保持forwards，回到起始backwards

animation-play-state:规定动画是否正在运行或暂停 这个需要单独使用，有两个值： running: 运行状态（默认值 ）paused: 暂停状态