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