transition-property
transition-property:none|<single-transition-property>[','<single-transition-property>]*
<single-transition-property>=all|<IDENT>
transition-property:none;默认没有过渡效果
transition-property:all;所有属性都有过渡效果
transition-property:left;
transition-property:left,color;
transition-duration 过渡效果执行时间
transition-duration:<time>[,<time>]*
transition-duration:0s;
transition-duration:1s;
transition-duration:1s,2s,3s;
transition-timing-function
transition-timing-function:<single-transition-timing-function>[','<single-transition-timing-function>]*
<single-tansition-timing-function>=ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)|
step-start|step-end|
steps(<integer>[,[start|end]]?)
ease两头慢中间快
linear线性 匀速
ease-in开始慢
ease-out结束慢
transition-timing-function：ease;
transition-timing-function:cubic-bezier(0.25,0.1,0.25,1);
transition-timing-function:linear;
transition-timing-function:cubic-bezier(0,0,1,1);
transition-timing-function:ease,linear;
transition-delay 动画延时
transition-delay:<time>[,<time>]*
transition-delay:1s;
transition
transition:<single-transition>[','<single-transition>]*
<single-transition>=[none|<single-transition-property>]||
<time>||<single-transition-timing-function>||<time>
transition:2s;duration
transition与animation的区别：
1.transition需要触发，animation自动触发的
2.animation可以做多帧动画
关键帧
animation-name
animation-name:<single-animation-name>[',' <single-animation-name>]*
<single-animation-name> = none| <IDENT>
animation-duration
animation-duration:<time>[,<time>]*
animation-duration:0s;
animation-duration:1s;
animation-timing-function
animation-timing-function:<single-timing-function>[',' ,<single-timing-function>]*
<single-timing-function> = <single-transition-timing-function>
animation-iteration-count 执行次数
animation-iteration-count:<single-animation-iteration-count>[',' <single-animation-iteration-count>]*
<single-animation-iteration-count> = infinite|<number>
animation-direction动画执行方向
animation-direction:<single-animation-direction>[',' <single-animtion-direction>]*
<single-animation-direction> =normal|reverse|alternate|alternate-reverse
alternate往返动画
animation-play-state
animation-play-state:<single-animation-play-state>[',' <single-animation-play-state>]*
<single-animation-play-state> = running|paused
animation-delay
animation-delay:<time>[,<time>]*
animation-fill-mode
动画在开始的时候是否要保持第一帧的状态，动画在结束的时候是否要保持最后一帧的状态
animation-fill-mode:<single-animation-fill-mode>[',' <single-animation-fill-mode>]*
<single-animation-fill-mode> = none|backwards|forwards|both
animation-fill-mode:backwards;开始的时候保持第一帧的状态
animation-fill-mode:forwards,backwards;
animation-fill-mode:both;开始保持第一帧状体，结束保持最后一帧状态；
animation
animation:<single-animation>[','<single-animation>]*
<single-animation> = <single-animation-name>||<time>||<single-animation-timing-function>||<time>||<single-animation-iteration-count>||<single-animation-direction>||<single-animation-fill-mode>||<single-animation-play-state>
关键帧定义
@keyframes
@keyframes abc{
from{opacity:1;height:100px; }
to{ opacity:0.5;height:200px; }
}
@keyframes abc{
0%{opacity:1;height:100px;}
100%{opacity:0.5;height:200px;}
}
@keyframes flash{
0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
animation:flash 0.5s both;
