CSS3 animation 和 transition 的问题_html/css_WEB-ITnose-html教程-PHP中文网

CSS3 animation 和 transition 的问题_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 09:46:03

原创

1740人浏览过

animation transition

animation是动画他可以设置百分比的样式 transition 只能设置0% 和100% 的样式我怎么让 transition 也可以设置改变中途的样式呢而且怎么让animation的动画像transition 一样控制他的播放就是我点击一个按钮他才播放而且不刷新的情况下多次点击就多次播放

回复讨论(解决方案)

animation是不能控制的要不一直播放要不就设置播放次数不能用户去控制播放的时候

你可以控制改变样式名

你可以控制改变样式名
求教

你可以控制改变样式名
求教
用户来控制开始播放,是这意思?

<style>div{opacity:0;position:absolute;top:50%;left:50%;width:300px;height:150px;margin:-75px 0 0 -150px;}.over{border:3px solid #eee;background:#e0e0e0;} .over{	-webkit-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;	-moz-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;	-o-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;	-ms-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;	animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;}@-webkit-keyframes animations{	0%{-webkit-transform:scale(0);opacity:0;}	40%{-webkit-transform:scale(1);opacity:1;}	100%{opacity:1;}}@-moz-keyframes animations{	0%{-moz-transform:scale(0);opacity:0;}	40%{-moz-transform:scale(1);opacity:1;}	100%{opacity:1;}}@-o-keyframes animations{	0%{-o-transform:scale(0);opacity:0;}	40%{-o-transform:scale(1);opacity:1;}	100%{opacity:1;}}@-ms-keyframes animations{	0%{-ms-transform:scale(0);opacity:0;}	40%{-ms-transform:scale(1);opacity:1;}	100%{opacity:1;}}@keyframes animations{	0%{transform:scale(0);opacity:0;}	40%{transform:scale(1);opacity:1;}	100%{opacity:1;}}  </style>  <div class="over" id="test" ></div><button onclick="fn()" >test</button><script>	var div=document.getElementById('test');	function fn(){		div.className='';		setTimeout(function(){			div.className='over';		},50);			}	</script>

登录后复制

animation是不能控制的要不一直播放要不就设置播放次数不能用户去控制播放的时候

我想问一下 setTimeout在这里的作用是什么为什么没了就点击按钮就没有效果了谢谢

你可以控制改变样式名
我想问一下 setTimeout在这里的作用是什么为什么没了就点击按钮就没有效果了谢谢

你可以控制改变样式名
我想问一下 setTimeout在这里的作用是什么为什么没了就点击按钮就没有效果了谢谢
这浏览器处理有关系，可能为了时隔太短太频繁只操作最后一次，所要用setTimeout一下

你可以控制改变样式名
我明白了我想要那个样式显示完以后不消失应该怎么做了最后一个问题了感激不尽

你可以控制改变样式名
我明白了我想要那个样式显示完以后不消失应该怎么做了最后一个问题了感激不尽
不是很明白你意思，#4的例子不是播放后一直显示着?

你可以控制改变样式名
我明白了我想要那个样式显示完以后不消失应该怎么做了最后一个问题了感激不尽
不是很明白你意思，#4的例子不是播放后一直显示着?

不是啊他播放完就消失了再点按钮他慢慢出现然后到100% div看不见了

不好意思，我没注意测试点太快没看出来
在主样式里加上最后的状态就行了

.over{    -webkit-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;    -moz-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;    -o-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;    -ms-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;    animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;   opacity:1; /* 加上最后状态*/}

登录后复制

animation-fill-mode: forwards