CSS3每日一练之动画属性-Transitions
2012-03-14 17:37
483 查看
来自：http://www.w3cfuns.com/thread-5592346-1-1.html
在CSS3中动画有两个属性，分别是Transitions和Animations。现在我们先来认识一下Transitions属性：
Transitions
此属性在不同浏览器下需要带有不通的前缀（例如-webkit-****），在这里便不再赘述；
它有三个参数，例如：
transitions:property duration timing-function;
property：表示对那个属性进行动画设置，比如background,color等（在后面的课程会列出可变换属性列表）；
duration：表示在多长时间内完成动画，也就是动画执行事件，比如1s表示1秒，0.5s表示半秒；
timing-function：表示执行什么种类的动画，也就是动画执行的计算种类，比如linear渐变（在后面的课程同样也会列出动画执行的计算种类列表）
比如我们现在来实现一个段落p默认背景色是黑色，当鼠标悬停时渐变成红色，执行时间为1秒的动画：
p{color:#fff; background:#000; -前缀-transition:background 1s linear;}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之动画属性-Transitions[一]| 前端开发网(W3Cfuns.com)！</title>
<style type="text/css">
*{margin:0; padding:0;}
body{padding:25px 10px 0; font-size:14px; color:#333; font-family:"Microsoft Yahei";}
p
{
padding:0 10px;
line-height:24px;
color:#fff;
background:#000;
-webkit-transition:background 1s linear;
-moz-transition:background 1s linear;
-o-transition:background 1s linear;
-ms-transition:background 1s linear;
transition:background 1s linear;
}
p:hover{background:#f00;}
</style>
</head>
<body>
<p>中国第一Web前端开发门户,CSS学习网为其前身,提供庞大前端免费资源,教程,培训,Web前端论坛,为企业提供前端招聘,被誉为Web前端开发工程师最贴心的家！</p>
</body>
</html>
其实我们还有另外一种使用Transitions功能的方法，就是将其属性中的三个参数，property属性，duration属性和timing-function属性中的三个参数的含义及指定方法拆开实现，如下代码：
transition-property:background;
transition-duration:1s;
transition-timing-funcion:linear;
这节课比较简单，主要是告诉大家Transitions功能的拆开方法，其实在很多情况下，我们都会用的到拆开来实现的。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之动画属性-Transitions[二]| 前端开发网(W3Cfuns.com)！</title>
<style type="text/css">
*{margin:0; padding:0;}
body{padding:25px 10px 0; font-size:14px; color:#333; font-family:"Microsoft Yahei";}
p
{
padding:0 10px;
line-height:24px;
color:#fff;
background:#000;
-webkit-transition-property:background;
-webkit-transition-duration:1s;
-webkit-transition-timing-funcion:linear;
-moz-transition-property:background;
-moz-transition-duration:1s;
-moz-transition-timing-funcion:linear;
-o-transition-property:background;
-o-transition-duration:1s;
-o-transition-timing-funcion:linear;
-ms-transition-property:background;
-ms-transition-duration:1s;
-ms-transition-timing-funcion:linear;
transition-property:background;
transition-duration:1s;
transition-timing-funcion:linear;
}
p:hover{background:#f00;}
</style>
</head>
<body>
<p>中国第一Web前端开发门户,CSS学习网为其前身,提供庞大前端免费资源,教程,培训,Web前端论坛,为企业提供前端招聘,被誉为Web前端开发工程师最贴心的家！</p>
</body>
</html>
上面的都是浮云！！！！！！！！！！！！！
下面这个例子才是王道，很有flash当年的感觉！
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之动画属性-Transitions组合动画| 前端开发网(W3Cfuns.com)！</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:14px; color:#333; font-family:"Microsoft Yahei";}
#box
{
margin:-100px 0 0 -100px;
top:50%;
left:50%;
width:200px;
height:200px;
line-height:200px;
text-align:center;
border:5px #d1d1d1 solid;
border-radius:105px;
box-shadow:0 0 20px #666;
background:#eee;
overflow:hidden;
position:absolute;
/*动画部分 开始*/
-webkit-transition:
margin 1s linear,
width 1s linear,
height 1s linear,
font-size 1s linear,
line-height 1s linear,
color 1s linear,
border 1s linear,
border-radius 1s linear,
background 1s linear,
box-shadow 1s linear,
-webkit-transform 1s linear;
-moz-transition:
margin 1s linear,
width 1s linear,
height 1s linear,
font-size 1s linear,
line-height 1s linear,
color 1s linear,
border 1s linear,
border-radius 1s linear,
background 1s linear,
box-shadow 1s linear,
-moz-transform 1s linear;
-o-transition:
margin 1s linear,
width 1s linear,
height 1s linear,
font-size 1s linear,
line-height 1s linear,
color 1s linear,
border 1s linear,
border-radius 1s linear,
background 1s linear,
box-shadow 1s linear,
-o-transform 1s linear;
/*动画部分 结束*/
}
#box:hover
{
margin:-200px 0 0 -200px;
width:400px;
height:400px;
font-size:26px;
line-height:400px;
color:#fff;
border:5px #fff solid;
border-radius:210px;
background:#05a;
box-shadow:0 0 40px #900;
-webkit-transform:rotate(720deg);
-moz-transform:rotate(720deg);
-o-transform:rotate(720deg);
}
</style>
</head>
<body>
<div id="box">前端开发网(W3Cfuns.com)！</div>
</body>
</html>
在CSS3中动画有两个属性，分别是Transitions和Animations。现在我们先来认识一下Transitions属性：
Transitions
此属性在不同浏览器下需要带有不通的前缀（例如-webkit-****），在这里便不再赘述；
它有三个参数，例如：
transitions:property duration timing-function;
property：表示对那个属性进行动画设置，比如background,color等（在后面的课程会列出可变换属性列表）；
duration：表示在多长时间内完成动画，也就是动画执行事件，比如1s表示1秒，0.5s表示半秒；
timing-function：表示执行什么种类的动画，也就是动画执行的计算种类，比如linear渐变（在后面的课程同样也会列出动画执行的计算种类列表）
比如我们现在来实现一个段落p默认背景色是黑色，当鼠标悬停时渐变成红色，执行时间为1秒的动画：
p{color:#fff; background:#000; -前缀-transition:background 1s linear;}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之动画属性-Transitions[一]| 前端开发网(W3Cfuns.com)！</title>
<style type="text/css">
*{margin:0; padding:0;}
body{padding:25px 10px 0; font-size:14px; color:#333; font-family:"Microsoft Yahei";}
p
{
padding:0 10px;
line-height:24px;
color:#fff;
background:#000;
-webkit-transition:background 1s linear;
-moz-transition:background 1s linear;
-o-transition:background 1s linear;
-ms-transition:background 1s linear;
transition:background 1s linear;
}
p:hover{background:#f00;}
</style>
</head>
<body>
<p>中国第一Web前端开发门户,CSS学习网为其前身,提供庞大前端免费资源,教程,培训,Web前端论坛,为企业提供前端招聘,被誉为Web前端开发工程师最贴心的家！</p>
</body>
</html>
其实我们还有另外一种使用Transitions功能的方法，就是将其属性中的三个参数，property属性，duration属性和timing-function属性中的三个参数的含义及指定方法拆开实现，如下代码：
transition-property:background;
transition-duration:1s;
transition-timing-funcion:linear;
这节课比较简单，主要是告诉大家Transitions功能的拆开方法，其实在很多情况下，我们都会用的到拆开来实现的。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之动画属性-Transitions[二]| 前端开发网(W3Cfuns.com)！</title>
<style type="text/css">
*{margin:0; padding:0;}
body{padding:25px 10px 0; font-size:14px; color:#333; font-family:"Microsoft Yahei";}
p
{
padding:0 10px;
line-height:24px;
color:#fff;
background:#000;
-webkit-transition-property:background;
-webkit-transition-duration:1s;
-webkit-transition-timing-funcion:linear;
-moz-transition-property:background;
-moz-transition-duration:1s;
-moz-transition-timing-funcion:linear;
-o-transition-property:background;
-o-transition-duration:1s;
-o-transition-timing-funcion:linear;
-ms-transition-property:background;
-ms-transition-duration:1s;
-ms-transition-timing-funcion:linear;
transition-property:background;
transition-duration:1s;
transition-timing-funcion:linear;
}
p:hover{background:#f00;}
</style>
</head>
<body>
<p>中国第一Web前端开发门户,CSS学习网为其前身,提供庞大前端免费资源,教程,培训,Web前端论坛,为企业提供前端招聘,被誉为Web前端开发工程师最贴心的家！</p>
</body>
</html>
上面的都是浮云！！！！！！！！！！！！！
下面这个例子才是王道，很有flash当年的感觉！
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之动画属性-Transitions组合动画| 前端开发网(W3Cfuns.com)！</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:14px; color:#333; font-family:"Microsoft Yahei";}
#box
{
margin:-100px 0 0 -100px;
top:50%;
left:50%;
width:200px;
height:200px;
line-height:200px;
text-align:center;
border:5px #d1d1d1 solid;
border-radius:105px;
box-shadow:0 0 20px #666;
background:#eee;
overflow:hidden;
position:absolute;
/*动画部分 开始*/
-webkit-transition:
margin 1s linear,
width 1s linear,
height 1s linear,
font-size 1s linear,
line-height 1s linear,
color 1s linear,
border 1s linear,
border-radius 1s linear,
background 1s linear,
box-shadow 1s linear,
-webkit-transform 1s linear;
-moz-transition:
margin 1s linear,
width 1s linear,
height 1s linear,
font-size 1s linear,
line-height 1s linear,
color 1s linear,
border 1s linear,
border-radius 1s linear,
background 1s linear,
box-shadow 1s linear,
-moz-transform 1s linear;
-o-transition:
margin 1s linear,
width 1s linear,
height 1s linear,
font-size 1s linear,
line-height 1s linear,
color 1s linear,
border 1s linear,
border-radius 1s linear,
background 1s linear,
box-shadow 1s linear,
-o-transform 1s linear;
/*动画部分 结束*/
}
#box:hover
{
margin:-200px 0 0 -200px;
width:400px;
height:400px;
font-size:26px;
line-height:400px;
color:#fff;
border:5px #fff solid;
border-radius:210px;
background:#05a;
box-shadow:0 0 40px #900;
-webkit-transform:rotate(720deg);
-moz-transform:rotate(720deg);
-o-transform:rotate(720deg);
}
</style>
</head>
<body>
<div id="box">前端开发网(W3Cfuns.com)！</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS3 Transitions属性打造动画的下载按钮特效
- CSS3 Transitions属性打造动画的下载按钮特效
- CSS3 动画 Transitions, Transforms和Animation属性
- CSS3动画Animation的八大属性
- css3中变形函数（同样是对元素来说的）和元素通过改变自身属性达到动画效果
- 解决浏览器background-image属性不支持css3动画
- css3动画基本属性
- animation属性——css3动画效果
- CSS3动画效果——js调用css动画属性并回调处理详解
- 复习：css3核心属性——选择器、盒子模型、多列布局、响应式布局、动画特效
- CSS3与动画有关的属性transition、animation、transform对比
- css3动画属性--transform（变形）
- css3各种动画属性
- css3 实现一个改变元素属性实现的动画效果
- CSS3的 transform属性，怎么才能让他同时执行多个不同动画（属性）效果
- css3动画属性系列之transform细讲scale缩放
- 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果
- css3动画属性系列之transform细讲旋转rotate
- css3动画属性系列之transform细讲scale缩放
- CSS3动画相关属性详解