目录
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>