在写网页里一些简单的动画可以使用css完成，一个常用的功能就是transition，JiaJieChan今天就对博客的几个地方加入了这个效果。它可以将不同宽度、颜色、字体、形状的元素与另一元素之间的:hover变化过程加入动画过渡效果。具体也可以看看本博边栏我的头像的区域，鼠标悬停在拉出按钮上可以看到有一段过渡的动画效果，是不是很好看，下面就看看transition的一些使用方法以及格式。

W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”

使用格式

使用方法很简单，transition: 元素 持续时间s; 这个就是格式，也可以看看下面的例子。

div {
background:#fff
transition: background 2s;
-moz-transition: background 2s;   /* Firefox 4 */
-webkit-transition: background 2s;  /* Safari 和 Chrome */
-o-transition: background 2s;  /* Opera */
}
div:hover {
background:#ccc;
}

如上就能够使background的改变加入动画过渡效果了。只要在:hover上加入改动后的属性就可以看到效果了。比如说前后的width宽度度发生变化而其他不变，则宽度会有一个变化过渡。

demo (鼠标放上来看看)

为了更好看，我加入了背景颜色。这不影响效果。

浏览器支持情况

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

Safari 需要前缀 -webkit-。

  • 注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。
  • 注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。

更多更加详细的css教程可以到这里看看，自学css；

http://www.w3school.com.cn/css3/css3_transition.asp

Last modification：June 25, 2021
© Allow specification reprint
如果解决了你的困扰, 赏杯咖啡吧!
正文字体： 苍耳字库（屏幕显示字体）·苍耳今楷