css过渡转变动画,css3过渡（transition）和动画（animation）变换（transform ）

1. 过渡(transition)

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

transition： CSS属性名 持续时间 过渡效果(默认ease) 延迟时间(默认0)；

transition：transition-property transition-duration transition-timing-function transition-timing-function；

| 属性 | 描述

| transition | 简写属性，用于在一个属性中设置四个过渡属性。

| transition-property | 规定应用过渡的 CSS 属性的名称。

| transition-duration | 定义过渡效果花费的时间。默认是 0。

| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。

// 鼠标滑过box，延迟0.2秒 宽度从50px过渡到100px

// css

.box {

width: 50px;

height: 50px;

background: red;

transition: width 1s ease .2s;

}

// html

.box:hover {

width: 100px;

}

transition-timing-function 规定过渡效果的时间曲线。

值 属性

linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。

ease 规定慢速开始，然后变快，然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。

ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。

ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。

ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

2. 动画(animation)

animation：动画名称(keyframe 名称)，花费时间，运动曲线(默认ease)，动画延迟(默认0)，播放次数(默认1)，是否反向播放动画(默认normal)，是否暂停动画(默认running)

| 值 | 描述 |

|

animation-fill-mode : none | forwards | backwards | both;

/*none：不改变默认行为。

forwards ：当动画完成后，保持最后一个属性值(在最后一个关键帧中定义)。

backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值(在第一个关键帧中定义)。

both：向前和向后填充模式都被应用。 */

.box1 {

width: 150px;

height: 150px;

border-radius: 50%;

background: red;

margin: 100px auto;

animation: animation1 5s ease-in 1s;

animation-fill-mode: backwards;

}

@keyframes animation1 {

0% {

background: red;

opacity: 1;

}

50% {

background: yellow;

opacity: 0.5;

}

100% {

background: blue;

opacity: 0;

}

}

3. transform 转换

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform-origin: bottom right;/* 设置旋转点，默认是中心点 */

旋转rotate、 transform-origin: bottom right;/* 设置旋转点，默认是中心点 */

transform: rotate(45deg);

.box2 {

width: 200px;

height: 200px;

margin: 100px auto;

transform: rotate(45deg);

background: url('./kaipin.jpg') 0 0 repeat;

background-size: cover;

}

移动translate

transform: translate(100px,100px);

translateX() ： 通过给定一个X方向上的数目指定一个translation。只向x轴进行移动元素，同样其基点是元素中心点，也可以根据transform-origin改变基点位置。

translateY() ：通过给定Y方向的数目指定一个translation。只向Y轴进行移动，基点在元素心点，可以通过transform-origin改变基点位置。

缩放scale

transform: scale(0.6);

scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)；scaleX(x)元素仅水平方向缩放(X轴缩放)；scaleY(y)元素仅垂直方向缩放(Y轴缩放)

扭曲skew

transform: skew(20deg,30deg);

skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形)；skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形)；skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)

矩阵matrix