css3 两个动画衔接播放

html-css010

css3 两个动画衔接播放,第1张

写成一个样式？那你的动画必须是针对一个元素定义的才好使吧，例如一个DIV从左到右，在从大变小，这个很轻松实现的，简单说下步骤：1：定义好DIV的原始top,left属性，div{top:20pxleft:20px}当然不要忘记加position:abslout了，2：触发动画，鼠标点击呢 还是鼠标移动到div,这里就选hover吧，鼠标略过，div:hover{top:100pxleft: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，有问题欢迎提问，尽量回答

源代码下载

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom，容器中包含 10 个 p 子元素，每个 p 中包含 1 个 span 元素：

居中显示；

定义容器的尺寸和样式；

画出容器里的 1 个元素，它有一个外壳 p，里面是一个白色的小方块 span；

为容器中的元素定义下标变量，并让元素的外壳依次旋转，围合成一个圆形，其中 outline 是辅助线；

至此，子元素绘制完成，接下来开始写动画脚本。

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

transition-delay                设置过渡延迟时间

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

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

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

transform-origin                设置旋转元素的基点位置（不常用，了解即可）

transform-style                  让转换的子元素保留3D转换（不常用，了解即可）

opacity                                设置元素的透明度

@keyframes                        设置关键帧动画

animation                            设置动画属性