css3 两个动画衔接播放

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3 两个动画衔接播放相关的知识,希望对你有一定的参考价值。

两个动画,播放完成第一个后播放第二个;
怎么将这些动作写成一个样式?

参考技术A

1. 将第二个的延迟时间(animation-delay) 设置成第一个的持续时间( animation-duration )

2. 多个动画应用时用逗号分隔开,如下图:

本回答被提问者和网友采纳
参考技术B 写成一个样式?那你的动画必须是针对一个元素定义的才好使吧,例如一个DIV从左到右,在从大变小,这个很轻松实现的,简单说下步骤:1:定义好DIV的原始top,left属性,divtop:20px;left:20px当然不要忘记加position:abslout了,2:触发动画,鼠标点击呢 还是鼠标移动到div,这里就选hover吧,鼠标略过,div:hovertop:100px;left:100px;;最基本的就是这样了,当然你还需要定义初始的width,height,控制方向就要top,left等,大小就用width,hight了,粗略的就是这样了,
如果是2个以上的元素,执行完一个元素的动画,再执行另一个元素的动画,建议使用jquery的animeat()方法的队列功能了,例如:var div=$("div");
div.animate(height:'300px',opacity:'0.4',"slow");
div.animate(width:'300px',opacity:'0.8',"slow");此方法的这个功能就是执行完第一个动画在执行另外一个,当然使用该JS之前你的CSS必须是先定义好的,
以上是本人比较粗浅的解释,绝非COPY,有问题欢迎提问,尽量回答

以上是关于css3 两个动画衔接播放的主要内容,如果未能解决你的问题,请参考以下文章

CSS3动画如何设置滑动到当屏的时候才触发动画播放

CSS3无法反转动画

传说中的css3制作动画原来是这样

CSS3动画如何设置滑动到当屏的时候才触发动画播放

速记中的 CSS3 动画播放状态在 IE 和 Safari 中不起作用

animation属性