CSS3每日一练之动画属性-Transitions

最新推荐文章于 2025-09-11 22:00:11 发布

转载最新推荐文章于 2025-09-11 22:00:11 发布 · 668 阅读

文章标签：

#css #前端开发 #microsoft #border #transition #web

手机浏览专栏收录该内容

8 篇文章

订阅专栏

本文介绍了CSS3中的过渡动画（Transitions）属性，包括如何设置背景颜色渐变动画，以及如何将过渡效果拆分为多个独立属性进行设置。此外，还提供了一个复杂的组合动画示例，展示了如何同时改变多个样式属性。

来自：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>