CSS3animation和transition的问题_html/css_WEB-ITnose

animation transition

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

回复讨论(解决方案)

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

你可以控制改变 样式名

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

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

 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;}}     


      
查看更多关于CSS3animation和transition的问题_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did112769