标签:
应用css3中的transition(过渡动画)、@keyframes(关键帧动画)、transform(2D、3D转换)可以实现一些小的动画效果。
一、transition—过渡动画
<!DOCTYPE html>
<html>
<head>
<title>基本图像的放大缩小</title>
<meta charset="utf-8">
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background: red;
transition: 1s ease 0.5s;
margin: 50px auto 0;
}
#div1:hover{
width: 400px;
height: 400px;
background: blue;
border-radius: 5%;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
这是一个基本的红色方块与蓝色方块的转换效果,transition属性实现了这两者之间的过渡。
五个属性
1、transition-property css样式的属性名称;
2、transition-duration 动画的持续时间,单位为s;
3、transition-timing-function 动画效果的函数名称,后接linear(线性变化)、ease(逐渐慢下来)、ease-in(加速)、ease-out(减速)等;
4、transition-delay 动画延迟执行的时间,单位也是s。
5、animation-play-state:paused; 暂停动画执行。
五个属性可以简写为 transition:样式 持续时间 动画效果 延迟时间;(效果没有可以不写)
标签:
原文地址:http://www.cnblogs.com/hhhhhh/p/5744178.html