CSS3动画--过渡效果

CSS3动画--过渡效果

transition                               设置四个过渡属性

transition-property　　          过渡的名称

transition-duration　　　　   过度效果花费的时间

transition-timing function　　过渡效果的时间曲线

transition-delay 　　　　　   过渡效果开始时间

1、案例源码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3动画--过渡效果</title>
<style>
*{margin: 0;padding: 0}
section{ 200px;height: 200px;background-color: coral;transition:width 2s,height 2s, transform 2s;
margin: 50px auto;}
section:hover{ 400px;height: 400px;transform:rotate(360deg);}
</style>
</head>
<body>
<section></section>
</body>
</html>

2、案例效果

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/qikeyishu/p/7392557.html