css过渡动画浅析

CSS过渡transition

transition-property: 过渡属性(默认值为all)

transition-duration: 过渡持续时间(默认值为0s)

transiton-timing-function: 过渡函数(默认值为ease函数)

transition-delay: 过渡延迟时间(默认值为0s)

触发动画几种情况

点击一个按钮，触发另一个地方开始过渡动画

在点击事件中写出css变化后的值即可

鼠标覆盖触发过渡动画

在css中 ：hover写出css变化后的值 即可

CSS过渡animation

animation: bottom_ 1s forwards;

@keyframes bottom_ {

    0%{bottom:-303px;}

    100%{bottom:0px;}

}

设置好动画开始与结束即可