css010 css的transform transition和animation

css010 css的transform transition和animation

看着没有一个能想起他们是干什么的。。

1、 Transform

Transform（变形）

rotate(旋转)

transform:rotate(10deg); 顺时针旋转10度 (deg角度的度量单位)

scale(缩放)

transform: scale (2); scale（缩放）调整元素的尺寸 （2代表倍数）

transform: scale (2,5); 宽变为两倍 高变为5倍

transform: scalex (2); 宽度变为2倍 高度不变

scale是缩放元素，当它后面的值为负数时可以让一个元素翻转

transform: scalex (-1); 从左往右翻。

transform: scalex (-1,1); 沿Y轴翻转。

transform: scalex (1,-1); 沿X轴翻转。

translate( 元素实现向某一个方向移动)

translate:x y; (x值为负值时-向左移动。Y为负值时-向上移动)

skew（倾斜）

transform:skew(45deg 0); 沿X轴倾斜

transform:skew(0 45deg); 沿Y轴倾斜

多个transform函数共用

transform:rotate(45deg) scale(2);

origin (根源，起点) 一般默认为元素中心点

transform-origin：left top;

2、 transition (过渡 变化 转化)

一、为了使transition生效，需要做以下事情：

1、两个样式：一个样式代表元素最初的样子，另一个样式代表最终的样子

2、Transition属性：

3、触发器

二、如何添加transition

Css的transition的核心是用四个属性控制要移动化战士哪些属性、动画过程要多久，使用什么类型的动画，以及动画开始前要不要延迟。

transition需要添加供应商前缀才能正常在浏览器中使用。（p389 p390）

以下例子是让鼠标经过时背景色变为蓝色，并且变化持续一秒。

1、.navButton{

background-color :orange;

transition-property:background-color;

transition-duration:1s;

}

.navButton：hover{

background-color：blue

}

三、四个属性分别是什么？？

1、transition-property ,定义了要以动画形式战士哪些属性

关键字：all、（color、background-color、boder-color）

2、transition-duration 定义了动画要持续多久才结束（一般以秒或者毫秒为单位）

transition-duration:1s;

还可以对每一个要定义动画的属性就行时间限定：

transition-property：color, background-color, boder-color;

transition-duration:1s, .75s ,2s;

3、transition-timing-function 控制动画的速度：可为下面四个值：

linera 、ease（默认） 、ease-in、 ease-out、ease-in-out

transition-timing-function: cubic-bezier(.20, .96, .74, .07)

4、transition-delay 延迟启动transition

transition：2s；

四、transition的快捷方式

transition属性可以一次性把transition-property transition-duration transition-timing-function transition-delay都表达出来。称为他的快捷属性

transition： all 1s ease-in 5s；

transition： background-color 1s ；等等

3、 Animation （创建动画）

一、 创建动画的两个步骤：

1、定义动画（包括创建关键帧）

2、将动画运用到元素上

二、 如何定义关键帧

定义关键帧的基本结构：

@keyframes animationName{

from{/* list css properties here*/}

to{/* list css properties here*/}

}

from 开始帧。to 结束帧

@keyframes fadein{

from{opacity：0；}

to{opacity：1；}

}

@keyframes fadein{

from{ background-color：red； }

50%{ background-color：blue； }

to{ background-color：orange；}

}

可以用0%替代from ，100%替代to；

三、 如何应用animation

1、可以给伪类应用动画，包括 :hover :active :target :focus

2、用@keyframes规则创建淡入动画：

@keyframes fadeIn{ from{opacity:0;} to{ opacity:1;} }(为单个属性创建动画)

(为多个属性创建动画)

@keyframes fadeIn{

from{

opacity:0;

color:red;

width:50%;

}

to{

opacity:1;

color:blue;

width:100%;

}

}

3、将动画应用到<div>标签的样式

.announcement{

animation-name:fadeIn;

animation-duration:1s;

}

animation-name 告诉浏览器使用哪一个动画

animation-duration 告诉浏览器动画持续的时间

四、 如何给animation定时

五、 如何完成animation

transition 是只能运行一次的动画

animation 可以运行多次的动画

animation-iteration-count：10； （将动画运行十次）

animation-direction 控制动画运行的方向：值可为：alternate

六、 animation快捷方式

.fade{

animation-name:fadeout;

animation-duration:2s;

animation-timing-function:ease-in-out;

animation-iteration-count:2;

animation-direction:alternate;

animation-delay:5s;

animation-fill-mode:forwards;

}

可以写成下面一句话：

.fade{ animation:fadeout 2s ease-in-out 2 alternate 5s forwards }

(只有名称和时间是必要的，其他的都是可选的。)

七、 如何暂停animation

animation-play-state:running/paused;

.fade:hover{ animation-play-state: paused; }