一、过渡
过渡属性:transition
transiton主要用来设置四个过渡属性,分别为:
transition-property:规定设置过渡效果的css属性的名称
transition-duration:规定完成过渡效果需要的时间
transition-timing-function:规定速度效果的速度曲线
属性值:
ease:(默认值),速度为从慢到快再到慢
linear:速度为线性速度
ease-in:从慢到快的过程
ease-out:从快到慢的过程
cubic-bezier():通过设置贝塞尔曲线数值或直接在浏览器调节获取贝塞尔曲线,自定义速度变化趋势
transition-delay:规定过渡效果何时开始
实例如下:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
width: 100px;
height: 100px;
background: skyblue;
/*过渡效果*/
transition:width 2s;
/*规定设置过渡效果的属性*/
transition-property: width;
/*设置过渡的时间*/
transition-duration:2s;
/*设置整个过渡变化的速度*/
transition-timing-function