10 CSS3过渡
特点:
1)本质上是一帧动画,一帧结束后,就没有了
2)过渡的效果的实现,必须通过用户的行为,可能触发,行为:hover, focus,click,JS代码
1、transition的属性
transition-property:指定元素的过渡属性
transition-duration:规定了过渡时间。
transition-timming-function:规定以何种方式过度
ease:表示快速
ease-in:先慢后快
eaxe-out:先快后慢
linear:线性的变化
steps():规定过度分几步完成。
2、缩写
transition:property duration function delay
用空格隔开
3、触发过渡
只有当用户触发事件,过渡事件才能进行,比如用户点击,鼠标移入移出等等,这是他的一个属性
4、局限性
11 CSS3动画
1、animation动画属性
animation-name :取值为动画名称
animation-duration:规定动画完成所需的时间
animation-timming-function:规定以什么方式完成动画
animation-delay:规定动画延迟多久执行
animation-iteration-count:规定动画执行的次数(infinite无限循环)
animation-direction:规定动画执行的方向
(alternate规定动画的来回执行)
animation-state:规定动画是否执行(paused表示暂停)
animation-fill-mode:规定动画开始之前和结束之后发生的操作,默认值为none;forwards表示动画结束元素保留到最后帧的状态
backwards则与forwards相反
2、@keyframes
规定一个动画,包括动画名称,
form规定初始状态,to规定动画的末状态
0%规定初始状态,100%规定动画最后帧