css 过渡动画 属性

html-css020

css 过渡动画 属性,第1张

transition-property            过渡效果的CSS属性名称

transition-delay                设置过渡延迟时间

transition-duration            设置完成过渡效果需要花费的时间

transition-timing-function    设置过渡效果的速度曲线

transition                            设置过渡属性的复合写法

transform-origin                设置旋转元素的基点位置(不常用,了解即可)

transform-style                  让转换的子元素保留3D转换(不常用,了解即可)

opacity                                设置元素的透明度

@keyframes                        设置关键帧动画

animation                            设置动画属性

过渡效果是在鼠标指针浮到元素上时发生的效果。

CSS过渡是元素从一种样式逐渐改变为另一种的效果,这边要注意的是,想要实现这一点,必须规定两项内容,规定您希望把效果添加到哪个CSS属性上规定效果的时长,规定您希望把效果添加到哪个CSS属性上,规定效果的时长。

用keyframes设置动画,然后animate应用动画

@keyframes myfirst {

    0%   {background: red}

    25%  {background: yellow}

    50%  {background: blue}

    100% {background: green}

} div {

    animation: myfirst 5s linear infinite

}

Via. http://w3school.com.cn/css3/css3_animation.asp