<style>
div{
width: 200px;
height: 100px;
background-color: pink;
transition: width 1s ease 0s,height 2s ease 1s;
// transition:要过渡的属性 花费的时间 运动曲线 何时开始;
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 2s;
}
div:hover{
width:400px;
}
</style>
//完整代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过渡</title>
</head>
<style type="text/css">
div {
float: left;
margin-right: 10px;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: skyblue;
}
/* 鼠标悬停时改变盒子颜色 */
div:hover {
background-color: aqua;
transition: all .8s linear 0s;
}
</style>
<body>
<div></div>
</body>
</html>
动画
/* 动画代码 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* 向此元素应用动画效果 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
// 完整代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>animation</title>
</head>
<style type="text/css">
div {
float: left;
margin-right: 10px;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: skyblue;
position: absolute;
border-radius: 50%;
}
div {
animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst {
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
</style>
<body>
<div></div>
</body>
</html>