首页 > 代码库 > 前端动画整合
前端动画整合
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.animate {
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
background-color: #f00;
line-height: 200px;
border-radius: 50%;
text-align: center;
color: #fff;
font-size: 20px;
}
.animate-transition {
transition: transform 2s linear;
-moz-transition: -moz-transform 2s linear;
-webkit-transition: -webkit-transform 2s linear;
-o-transition: -o-transform 2s linear;
}
.animate-transition:hover {
cursor: pointer;
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="animate animate-transition">Transition Animation</div>
</body>
</html>
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.animate {
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
background-color: #f00;
line-height: 200px;
border-radius: 50%;
text-align: center;
color: #fff;
font-size: 20px;
}
.animate-keyframes {
-webkit-animation: none;
}
.animate-keyframes:hover {
cursor: pointer;
-webkit-animation: frames 2s linear infinite;
}
@-webkit-keyframes frames {
0% {
background-color: #f00;
-webkit-transform: rotate(0deg);
}
100% {
background-color: #f00;
-webkit-transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="animate animate-keyframes">Transition Animation</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.animate-svg {
width: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="animate-svg">
<svg id="svgAnimation" ns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
<g transform="translate(100, 100)">
<g>
<rect width="200" height="200" rx="100" ry="100" fill="red" transform="translate(-100, -100)"></rect>
<text x="-60" y="-0" font-size="20" fill="white">SVG Animation</text>
<animateTransform attributeName="transform" attributeType="xml" type="rotate" from="0" to="360" dur="3s" repeatCount="indefinite">SVG Animation</animateTransform>
</g>
</g>
</svg>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.animate {
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
line-height: 200px;
border-radius: 50%;
text-align: center;
color: #fff;
font-size: 20px;
}
.animate-input {
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="animate-RAF" class="animate animate-RAF">RAF Animation</div>
<div class="animate-input"><input type="button" id="btn_start" value="http://www.mamicode.com/Start" style="width:100px;height:30px;" /></div>
<script type="text/javascript">
var animate_raf = document.getElementById("animate-RAF"),
btn_start = document.getElementById("btn_start"),
frameid = null;
function frame(time) {
animate_raf.style[‘-webkit-transform‘] = ‘rotate(‘ + Math.cos(time/1000) * 360 + ‘deg)‘;
frameid = requestAnimationFrame(frame);
}
// 绑定事件
btn_start.addEventListener("click", function(event) {
var val = this.value;
if (val == "Start") {
frameid = requestAnimationFrame(frame);
this.value = "http://www.mamicode.com/Pause";
} else {
this.value = "http://www.mamicode.com/Start";
cancelAnimationFrame(frameid);
}
}, false);
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.animate {
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
line-height: 200px;
border-radius: 50%;
text-align: center;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.web-animation-1 {
-webkit-transform: rotate(360deg);
}
</style>
</head>
<body>
<div id="web_animation_1" class="animate web-animation-1">Web Animation-1</div>
<script src="http://www.mamicode.com/web-animations.js"></script>
<script type="text/javascript">
var web_animation_1 = document.getElementById("web_animation_1");
web_animation_1.addEventListener(‘click‘, function() {
web_animation_1.animate([{
transform: ‘rotate(0deg)‘
}, {
transform: ‘rotate(360deg)‘
}],{
duration: 2
});
}, false);
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.animate {
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
background-color: #f00;
line-height: 200px;
border-radius: 50%;
text-align: center;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.web-animation-2 {
-webkit-transform: rotate(360deg);
}
</style>
</head>
<body>
<div id="web_animation_2" class="animate web-animation-2">Web Animation-2</div>
<script src="http://www.mamicode.com/web-animations.js"></script>
<script type="text/javascript">
var web_animation_2 = document.getElementById("web_animation_2");
web_animation_2.addEventListener(‘click‘, function() {
web_animation_2.animate([{
transform: ‘rotate(0deg)‘
}, {
transform: ‘rotate(360deg)‘
}],{
// 旋转方向
direction: "alternate",
// 旋转值
duration: 1,
// 迭代
iterations: Infinity,
// 缓解过渡
easing: ‘ease-in-out‘,
// 播放速率
playbackRate: 2
});
}, false);
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.web_animation_4 {
width: 700px;
margin: 0 auto;
padding: 10px;
background-color: #ccc;
cursor: pointer;
}
.web_animation_4 .par-timing-box {
background-color: #00f;
height: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div id="web_animation_4" class="web_animation_4">
<div id="parItem1" class="par-timing-box" style="width: 500px;"></div>
<div id="parItem2" class="par-timing-box" style="width: 700px;"></div>
<div id="parItem3" class="par-timing-box" style="width: 200px;"></div>
</div>
<script src="http://www.mamicode.com/web-animations.js"></script>
<script type="text/javascript">
var web_animation_4 = document.getElementById("web_animation_4"),
parItem1 = document.getElementById("parItem1"),
parItem2 = document.getElementById("parItem2"),
parItem3 = document.getElementById("parItem3");
web_animation_4.addEventListener(‘click‘, function() {
var obj = new ParGroup([
new Animation(parItem1, [{width: ‘0px‘}, {width: ‘500px‘}], 1),
new Animation(parItem2, [{width: ‘0px‘}, {width: ‘700px‘}], 1),
new Animation(parItem3, [{width: ‘0px‘}, {width: ‘200px‘}], 1)
]);
document.timeline.play(obj);
}, false);
</script>
</body>
</html>
前端动画整合