<!DOCTYPE html>
<html>
<head>
<style>
.my-animation
{
width:100px;
height:100px;
background:red;
position:relative;
/* 规定 @keyframes 动画的名称。 */
animation-name:myfirst;
/* 规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/
animation-duration:5s;
/* 规定动画的速度曲线。默认是 "ease"。*/
animation-timing-function:linear;
/* 规定动画何时开始。默认是 0。*/
animation-delay:2s;
/* 规定动画被播放的次数。默认是 1。*/
animation-iteration-count:infinite;
/* 规定动画是否在下一周期逆向地播放。默认是 "normal"。*/
animation-direction:alternate;
/* 规定动画是否正在运行或暂停。默认是 "running"。*/
animation-play-state:running;
/* 与上面的动画相同，可以使用了简写的动画 animation 属性*/
animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
.my-transition
{
margin-top: 200px;
width:100px;
height:100px;
background:yellow;
/*
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
*/
transition:width 2s linear 1s, height 2s linear 1s, transform 2s linear 1s;
}
/* 伪类触发包含 :hover : focus :checked :active */
.my-transition:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
}
.my-click-transiton
{
width:250px;
height:250px;
transform:rotate(270deg);
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<div class="my-animation"></div>
<div class="my-transition">请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</div>
<input type="button" id="mybutton" value="click">
<script>
//用js触发CSS3-transition过渡动画
$('#mybutton').click(function () {
var myTransition = $('.my-transition');
if (myTransition.hasClass('my-click-transiton')) {
myTransition.removeClass('my-click-transiton')
} else {
$('.my-transition').addClass('my-click-transiton');
}
});
</script>
</body>
</html>
