1.什么是过渡属性?过渡属性的基本语法?
首先,过渡属性是一个不需要web前端使用js语言去编写程序,直接使用css样式就可以实现简单的动画效果。在该属性的加持下,可以让一些动画效果看起来更加顺滑。
其次,transition CSS属性其实是 transition-property , transition-duration ,transition-timing-function 和 transition-delay 的一个简写属性。这四个属性分别表示过渡或动态模拟的CSS属性、完成过渡所需要的时间、完成动画所使用的的过渡函数、过度开始时出现的延迟时间。
基本语法为:transition :[ transition-property ,transition-duration ,transition-timing-function ,transition-delay ] 简写时依次为这四个值。
2.transition-property
基本语法:transition-property:none | all | property;分别表示没有属性会获得过渡效果、全部属性都获得过渡效果、定义应用过渡属性的CSS属性名称列表,列表以逗号隔开。
下图就是相当于property,定义应用过度属性的css属性名称(宽度width)
3.transition-duration
transition-duration:time;该属性表示你的动画所需要的时间。
下图就是长度变换为200px所需要的2s的时间。
4.transition-timing-function
transition-timing-function:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
linear表示以规定的速度开始至结束的过渡效果。相当于cubic-bezier(0,0,1,1);
ease表示以规定慢速开始,然后变快、然后慢速结束的过渡效果。相当于cubic-bezier(0.25,0.1,0.25,1);
ease-in表示以慢速开始的过渡效果。相当于cubic-bezier(0.42,0,1,1);
ease-out表示以慢速结束的过渡效果。相当于cubic-bezier(0,0,0.58,1);
ease-in-out表示以慢速开始和结束的过渡效果。相当于cubic-bezier(0.42,0,0.58,1);
cubic-bezier(n,n,n,n)可以定义自己的值,可能的值在0-1之间。
5.transition-delay
transition-delay:time;表示动画开始时的延迟时间。
最后附上一个动画效果的小demo,有兴趣的可以自己试一下效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin: 120px auto;
width: 200px;
height: 200px;
background: red;
transition: all 2s linear 1s;
}
div:hover{
background: yellow;
transform: rotate(60deg) scale(2) translate(100px,200px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>