transition属性详解
今天由于上午有事，只能晚上写文章了，今天借助前两天讲的伪类，总结一下transition属性，这样做出来的页面效果会更加美观一些，可能会有不足的地方，欢迎大佬补充。
transition属性的格式：
transition：transition-property，transition-duration，transition-timing-function，transition-delay；
它的四个过渡属性是这样的意思：
transition-property：规定设置过渡效果的属性名称。
transition-duration：规定完成这个过渡效果需要多少秒或者毫秒。
transition-timing-function：规定这个过渡效果的速度曲线。
transition-delay：规定过渡的延迟时间。
过渡的动画类型主要有：
linear：线性过渡。
ease：平滑过渡。
ease-in：逐渐加速。
ease-out：逐渐减速。
ease-in-out：先加速后减速。
他们的属性介绍主要是：
linear：规定以相同的速度开始至结束的过渡效果。
ease：规定慢速开始逐渐变快然后慢速结束的过渡效果。
ease-in：规定以慢速度开始的过渡效果。
ease-out：规定以慢速度结束的过渡效果。
ease-in-out：规定以慢速开始至结束的过渡效果。
我们做一个小例子，我们利用伪类，当光标移动在div上，背景颜色由红色变成绿色：
<style>
.div1{
width: 100px;
height: 100px;
background-color: red;
transition: background-color 2s linear;
}
.div1:hover{
background-color: green;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
运行结果：
总体来说：transition属性还是搭配伪类用的比较多，比如hover、：focus，但是也常会用到javascript、@madia触发。transition和javascript的结合更为强大。js用来设定要变化的样式，transition则负责动画效果。我们一般都在css里面写transition，transition属性可以指定参与的过渡属性，过度时间，过渡延迟时间以及过渡动画类型等。
在写代码的时候发现transition-property属性不显示，我后来去博客查了查，才知道目前的主流浏览器，需要我们在实际开发中加浏览器厂商的前缀。我们举个例子。
.lzr{
-webkit-transition: backgorund 0.5s ease 0;
-moz-transition: backgorund 0.5s ease 0;
-ms-transition: backgorund 0.5s ease 0;
transition: backgorund 0.5s ease 0;
}
写完了，看看浏览器端，IE没问题，chrome没问题，火狐也没问题，Opera问题来了，居然没有效果，最后发现Opera要这样写：
-o-transition: backgorund 0.5s ease 0s;
大家看到差异了吗？
我总结一下：
火狐：-moz-
IE：-ms-
chrome：-webkit-
opera：-o-
今天我们就先总结这些，大家好好消化。明天我们总结一下css的渐变（gradients），希望大家可以关注我一下，我们从最基础学起。把基础打牢固，然后我们再进阶。
最后认识一下吧，我叫吕恣瑞，分享web开发知识以及学习经验，关注我，你可以有质的飞跃。
我给大家准备了很多学习资料，在公众号主页：
回复【领取福利】，我为大家准备了很多学习资料，比如ppt，python实战，web基础学习，原生js特效，css特效等
回复【进群交流学习】，添加助理微信，助理会拉大家进群，群里有很多公众号号主，学校老师，web领域开发者，不懂得可以发群里，大家一起讨论学习。
我们在web前端相遇，我们也要在web精进这方面成为彼此最好的老师。
感谢大家关注！！！
不清楚地朋友可以参考：学习资料领取点击这里
她的码农
排版
吕恣瑞
技术分享
transition属性
