css3边框交替动画_CSS3之边框样式（动画过渡）

简述

CSS3中transition属性定义了过渡，我们可以使用它来辅助我们实现一个边框样式的动画过渡。

transition

定义和用法

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property

transition-duration

transition-timing-function

transition-delay

语法

transition: property duration timing-function delay;

值

描述

transition-property

规定设置过渡效果的 CSS 属性的名称

transition-duration

规定完成过渡效果需要多少秒或毫秒

transition-timing-function

规定速度效果的速度曲线

transition-delay

定义过渡效果何时开始

实现

效果

源码

/* 动画过渡 */

#main_menu a, #main_menu li {

-webkit-transition: all 0.4s ease-in-out 0s;

-moz-transition: all 0.4s ease-in-out 0s;

-o-transition: all 0.4s ease-in-out 0s;

-ms-transition: all 0.4s ease-in-out 0s;

/* 动画效果