mshd.net
当前位置:首页 >> Css3的%wEBkit%AnimAtion动画执行后会变回原来的样... >>

Css3的%wEBkit%AnimAtion动画执行后会变回原来的样...

动画如果只执行一次,光通过css无法办到,可以把动画结束时的样式写入一个class中,用js在动画结束时把class赋给这个对象。

举个例如下: .test{ display:block; width:100px; height:20px; border:1px solid #ff0000; -webkit-animation:f0 2s 0.5s 1 linear; -webkit-animation-fill-mode:forwards; } .test-high{ width:500px; -webkit-animation:f1 2s 0.5s 1 linea...

这样改一下就好 @-webkit-keyframes wave { from{-webkit-transform:rotate(30deg)} to{-webkit-transform:rotate(300deg)} }

class {第一段动画的初始状态;第二段动画终止状态;transition} hover {第一段动画终止状态;第二段动画初始状态} 觉得不能满足 就用@keyframes

让动画播放一次就OK,不要循环

c3实现你这个需求很麻烦,建议你用JQ的animate: $('el').animate({top: "-=20",right:"-=30"}, 600); 移不动请检查该元素是否有position:relative。 或者自己用js封装一个动画。

少了一个}吧?要不就是你的解释器不支持animation。但我觉得应该是最后少了一个和div{对应的}

有一个 transition-delay:10s; 就可以了

给你一个例子: Document .item1{ list-style: none; -webkit-animation: revolving 4s 0s infinite; animation: revolving 4s 0s infinite; } @-webkit-keyframes revolving{ 0,75%{ -webkit-transform: perspective(700px) rotateX(90deg); } ...

CSS3 里面 animation下有个animation-fill-mode 设定动画完成后的状态,默认是none 设为forwards 就可以在动画完成后定格在动画最后一帧

网站首页 | 网站地图
All rights reserved Powered by www.mshd.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com