CSS过渡动画之transition
Posted 于果alpha技术博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS过渡动画之transition相关的知识，希望对你有一定的参考价值。
O(∩_∩)O~
这两天在看看CSS的相关内容，关于transition动画感觉很有意思，分享一下。
CSS负责给html加效果，自然少不了各种动画，今天介绍一下transition。
概述
看一段比较学术的定义：transition主要负责页面的过渡效果，transition可以使css的属性值在一定时间内平滑地过渡。这种效果可以在鼠标划过、点击、获得焦点或者对元素的任何改变中触发，并平滑地以动画效果改变css的属性值。
transition的几个常用属性
1.transition-property：设置哪些属性进行过渡。
2.transition-duration：完成过渡动画需要的时间，默认为零。
3.transition-timing-function：设置动画的缓冲效果，默认是ease（逐渐变慢）。其他常用的几个值有ease-in（加速），ease-out（减速），ease-in-out（先加速后减速）。
4.transition-delay：设置动画开始的延迟时间，默认是零。
ps：实际应用中，可以将四个属性简写到一条指令：transition：property duration timing-function delay; 实际就是把四个属性合到一块儿，中间用空格隔开。
实例
使用transition，实现一个过渡效果，一个红色的正方形，当鼠标进入该区域时，红色正方形放大一倍，同时变成绿色的圆形。鼠标离开，还原到初始状态。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css的transition属性</title> 6 </head> 7 <style type="text/css"> 8 .box{ 9 width: 100px; 10 height: 100px; 11 margin: 50px auto; 12 background-color: #f00; 13 transition:all 1s; 14 } 15 /*css中的:hover选择器用于选择鼠标指针浮动在上面的元素。*/ 16 .box:hover{ 17 width: 200px; 18 height: 200px; 19 border-radius: 50%; 20 background-color: #00bf00; 21 22 transition-property: width,height,border-radius,background-color; 23 transition-duration: 1s; 24 transition-timing-function: ease-in; 25 transition-delay: 100ms; 26 } 27 28 </style> 29 <body> 30 <div class="box"></div> 31 </body> 32 </html>
以上是关于CSS过渡动画之transition的主要内容，如果未能解决你的问题，请参考以下文章