Transform属性的基本介绍
Transform属性的基本介绍
CSS3中新增的transform属性,可以实现元素在变换过程中的过渡效果,实现了基本的动画。
transition的语法:transition: transition-property || transition-duration ||
transition-timing-funciton || transition-delay ;
其参数的取值说明如下:
<transition-property>:定义用于过渡的属性;
<transition-duration>:定义过渡过程需要的时间;
<transition-timing-function>:定义过渡的方式;
<transition-delay>:定义开始过渡的延迟时间;
使用transition属性定义一组过渡效果,需要以上四个参数。transition属性简写形式中间用空格隔开。也可以同时定义两组或两组以上的过渡效果,组与组之间用逗号分隔。
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<link rel="stylesheet" href="../CSS/transition.css">
</head>
<body>
<div>
<div class="ty"></div>
</div>
</body>
</html>
css代码:
.ty{
width: 200px;
height:200px;
background-color: red;
margin: auto;
transition:background-color .5s ease-in .5s;
}
.ty:hover{
background-color: blue;
}
注意其中的transition属性,在此处使用了简写。顺序依次为开篇介绍定义四种属性的顺序,中间使用了hover标签。所展示的效果为,当鼠标移动到div上方时。在五秒钟后背景颜色会在五秒内由慢到快从红色变成黄色的效果。
重点:CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容:
-
指定要添加效果的CSS属性
-
指定效果的持续时间。