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; }