<html>
<head>
<meta charset="utf-8">
<title>通过切换Class改变动画</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
@charset "UTF-8"
*{ padding:0margin:0font-size:14px }
.pa{
position:relativewidth:650pxheight:50pxbackground-color: #4F3429margin: 24px auto
}
.target{
width:50pxheight:100%border-radius:10pxbackground-color: #93788Eposition:absolutetop:0left:0
}
.aimated{
-webkit-animation-duration: 2s
animation-duration: 2s
-webkit-animation-fill-mode: both
animation-fill-mode: both
animation-timing-function:linear
-webkit-animation-timing-function:linear
}
.dh1{
-webkit-animation-name: dh1
animation-name: dh1
}
@keyframes dh1{
0%{
left: 0
}
100%{
left: 600px
}
}
.dh2{
-webkit-animation-name: dh2
animation-name: dh2
}
@keyframes dh2{
0%{
left:0
}
10%{
left:100px
}
15%{
left:50px
}
90%{
left:600px
}
92%{
left:550px
}
95%{
left:600px
}
98%{
left:580px
}
100%{
left:600px
}
}
</style>
</head>
<body>
<div class="pa">
<div class="target aimated"></div>
</div>
<button name="set-def">设置默认动画</button>
<button>换一个</button>
</body>
<script type="text/javascript">
$(function(){
$('button').click(function(){
if( !$(this).attr('name') ){
if( $('.target').hasClass('dh1') ){
$('.target').addClass('dh2').removeClass('dh1')
}else{
$('.target').addClass('dh1').removeClass('dh2')
}
}else{
$('.target').addClass('dh1')
}
})
})
</script>
</html>
基本原理参见如下代码在IE8中效果，样式根本没有起作用。 <html><head><...可以通过js或其他方法曲线的实现html5 css3的问题。 或者尽你自己的一份力...
