动画--过渡属性 transition-property

时间 2019-11-24

标签动画过渡属性 transition property 繁體版

原文原文链接

动画--过渡属性 transition-property

早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增长了一个新的模块transition，它能够经过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是经过鼠标的单击、得到焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。css

在CSS中建立简单的过渡效果能够从如下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，好比悬浮状态；
第三，在默认样式中经过添加过渡函数，添加一些不一样的样式。

CSS3的过分transition属性是一个复合属性，主要包括如下几个子属性：html

transition-property:指定过渡或动态模拟的CSS属性

transition-duration:指定完成过渡所需的时间

transition-timing-function:指定过渡函数

transition-delay:指定开始出现的延迟时间

先来看transition-property属性web

transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具有一个中点值的属性（须要产生动画的属性）才能具有过渡效果，其对应具备过渡的CSS属性主要有：函数

HTML:动画

<div></div>

CSS:spa

div {
  width: 200px;
  height: 200px;
  background-color:red;
  margin: 20px auto;
  -webkit-transition: background-color .5s ease .1s;
  transition: background-color .5s ease .1s;
}
div:hover {
  background-color: orange;
}

演示结果:code

鼠标移入htm

鼠标移出blog

特别注意：当“transition-property”属性设置为all时，表示的是全部中点值的属性。事件

用一个简单的例子来讲明这个问题：

假设你的初始状态设置了样式“width”,“height”,“background”,当你在终始状态都改变了这三个属性，那么all表明的就是“width”、“height”和“background”。若是你的终始状态只改变了“width”和“height”时，那么all表明的就是“width”和“height”。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div></div>

</body>
</html>

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-property: width;
  -webkit-transition-property:background;
  transition-property:background;
  transition-property: width;
  -webkit-transition-duration:1s;
  transition-duration:1s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: 1s;
      transition-delay:1s;
}
div:hover {
  width: 400px;
  background:yellow;
}