html触发条件,如何触发css3动画

如何触发css3动画

1、可以选择利用css的状态：hover，focus，active 来触发，也可以一开始就触发。

#aaa {

width: 100px;

height: 100px;

background: blue;

transition: width 2s;

-moz-transition: width 2s; /* Firefox 4 */

-webkit-transition: width 2s; /* Safari and Chrome */

-o-transition: width 2s; /* Opera */

}

#aaa:hover{

width: 200px;

}

#aaa:active{

width: 300px;

}

2、使用Js点击触发过渡Transitions效果，指定的属性名称是width

#aaa {

width: 100px;

height: 100px;

background: blue;

transition: width 2s;

-moz-transition: width 2s; /* Firefox 4 */

-webkit-transition: width 2s; /* Safari and Chrome */

-o-transition: width 2s; /* Opera */

}

function big() {

document.getElementById("aaa").style.width = "300px";

}

function small() {

document.getElementById("aaa").style.width = "100px";

}

Big

Small

效果：

更多CSS相关技术文章，请访问CSS3答疑栏目进行学习！