目录
1、transition-property（过渡属性样式）**必须被设置**
2、transition-duration（过渡属性的持续时间）
4、transition-timing-function（过渡运动曲线）
1.animation-name (规定@keyframes动画的名称)
4.animation-timing-function（动画的速度曲线）
5.animation-play-state（动画状态改变）
6.animation-fill-mode（动画结束停留位置）
7.animation-iteration-coun（播放次数）
8.animation-direction（是否下周期逆向播放）
一、过渡
概念
添加某种效果，可以让对象实现触发后，进行样式的转换变化。
过渡属性
1、transition-property（过渡属性样式）**必须被设置**
注：单设过渡样式，触发瞬间改变
/* transition-property: all | [css1 [...]]; */ transition-property: width, height;
值 描述 none 没有属性会获得过渡效果。 all 所有属性都将获得过渡效果。 property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
2、transition-duration（过渡属性的持续时间）
注：
- 设置过渡时间，触发改变的时候，会以指定时间持续改变。
- 通常改变0.2-0.3s
- 设置时间的 ‘0’ 可以被省略
transition-duration: <time>; 规定完成过渡效果需要花费的时间（以秒或毫秒计）。 默认值是 0，意味着不会有效果。 transition-duration: .3s;3、transition-delay （延迟效果执行时间）
transition-delay: <time>; 指定秒或毫秒数之前要等待切换效果开始 transition-delay: 2s;4、transition-timing-function（过渡运动曲线）
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
值 描述 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 之间的数值。 - 贝塞尔曲线学习。查询网站
5、transition （整体赋值）
transition: property duration timing-function delay; transition: width 2s;<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>过度</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: orange; /*过度*/ /*持续时间*/ /*来去均具有过度效果*/ transition-duration: .5s; /*延迟时间*/ /*transition-delay: 1s;*/ /*过度属性: all*/ /*transition-property: width, height;*/ /*过度曲线*/ /*transition-timing-function: linear;*/ /*整体设置*/ /*transition: all .3s .1s linear;*/ transition: .3s cubic-bezier(0,.99,0,.99); } .hover { width: 200px; height: 200px; margin: 0 auto; } /*可以制造第二状态的处理方式*/ .hover:hover .box { width: 400px; height: 190px; background-color: red; /*去向第二状态才有过度效果*/ /*transition-duration: .1s;*/ } .box:active { } </style> </head> <body> <!-- 过度:从一个状态以动画方式变成另一种状态的这种变化过程就叫做过度 --> <!-- 过度效果通过hover产生,可以制作一个hover层 --> <!-- hover层处理方式:与显示层同等区域大小 --> <!-- 同样可以将显示层的位置交于hover层处理 --> <div class="hover"> <div class="box"></div> </div> </body> </html>
二、动画
动画属性
1.animation-name (规定@keyframes动画的名称)
animation-name: keyframename|none; animation-name:mymove;
值 说明 keyframename 指定要绑定到选择器的关键帧的名称 none 指定有没有动画（可用于覆盖从级联的动画） 2.animation-duration（动画单周期时间）
animation-duration: time; 指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。 animation-duration:2s;3.animation-delay（动画延迟开始时间）
animation-delay: time; 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0 animation-delay:2s;4.animation-timing-function（动画的速度曲线）
/* animation-timing-function: value;*/ /* 标准语法 */ #div1 {animation-timing-function: linear;} #div2 {animation-timing-function: ease;} #div3 {animation-timing-function: ease-in;} #div4 {animation-timing-function: ease-out;} #div5 {animation-timing-function: ease-in-out;} #div1 {-webkit-animation-timing-function:cubic-bezier(0,0,0.25,1);} #div2 {-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);} #div3 {-webkit-animation-timing-function:cubic-bezier(0.42,0,1,1);} #div4 {-webkit-animation-timing-function:cubic-bezier(0,0,0.58,1);} #div5 {-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);}
值 描述 linear 动画从头到尾的速度是相同的。 ease 默认。动画以低速开始，然后加快，在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 5.animation-play-state（动画状态改变）
/* animation-play-state: paused|running;*/ paused:指定暂停动画 running：指定正在运行的动画6.animation-fill-mode（动画结束停留位置）
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
值 描述 none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 forwards（终点） 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。 backwards（起点） 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。 both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。 initial 设置该属性为它的默认值。 inherit 从父元素继承该属性。 7.animation-iteration-coun（播放次数）
animation-iteration-count: value; <count>：一个数字，定义应该播放多少次动画 infinite：指定动画应该播放无限次（永远）
8.animation-direction（是否下周期逆向播放）
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
值 描述 normal 默认值。动画按正常播放。 reverse 动画反向播放。 alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 initial 设置该属性为它的默认值。 inherit 从父元素继承该属性。 动画体
/*动画属性设置给指定选择器标签，动画体在样式中单独设置*/ @keyframes <name>{ /*from未写任何属性设置时，默认全部取初始值（初始状态）*/ from{} to{} } @keyframes <name>{ 0% {} ... 100% {} }<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动画</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: orange; } /*动画样式*/ .box { /*绑定动画名*/ animation-name: wasai; /*持续时间*/ animation-duration: 1s; /*延迟时间*/ /*animation-delay: .1s;*/ /*动画结束停留位置:backwards起点 forwards终点*/ /*animation-fill-mode: forwards;*/ /*运动次数 infinite无数次*/ animation-iteration-count: 4; /*多次运动方向的规则*/ /*alternate:来回*/ /*alternate-reverse:终点开始来回*/ /*animation-direction: alternate-reverse;*/quotes: ; /*动画状态 running*/ /*animation-play-state: paused;*/ /*整体设置*/ animation: wasai 1s 2 linear alternate; } .box:hover { animation-play-state: running; } /*动画体*/ @keyframes wasai{ 0% {} 100% {width: 400px;} } @keyframes wasai1{ 0% {} 100% {} } @keyframes wasai2{ 0% {} 100% {} } </style> </head> <body> <div class="box"></div> </body> </html>