一.属性详解
- transition:允许css属性值在一定的时间区内平滑过渡：
- transition-property:规定应用过渡的css属性名称，默认为all；多个属性用“,”隔开
- transition-duration:过渡时间，默认为0；
- transition-timing-function: 时间曲线，默认为ease；
- transition-delay:过渡效果何时开始。
2.简写
例如：a{all 0.5s ease-in 1s;}
3.timing-function:
ease 逐渐变慢
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速再减速
cubic-bezier 自定义
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> <style> div { width: 200px; height: 200px; overflow: hidden; text-align: center; border: 5px solid black; } div img{ width: 100%; height: 100%; vertical-align: middle; -webkit-transition: all 0.8s linear; -moz-transition: all 0.8s linear; -ms-transition: all 0.8s linear; -o-transition: all 0.8s linear; transition: all 0.8s linear; } div img:hover{ width: 250px; height: 250px; } </style> </head> <body> <div> <img src="images/img_19.png" alt=""> </div> </body> </html>