1.过渡
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
Internet Explorer 9 以及更早的版本,不支持 transition 属性。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
(1)规定您希望把效果添加到哪个
(2)CSS 属性上规定效果的时长
如果时长未规定,则不会有过渡效果,因为默认值是 0。
当鼠标经过盒子时,盒子改变,当鼠标离开时,逐渐恢复原来的样式。
div
{
width:100px;
height:200px;
border:2px solid blue;
background-color:gray;
transition:width 2s,height 2s;
}
div:hover{
width:150px;
height:300px;
transform:rotate(60deg);
}
2.动画
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-
Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。
当您在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
(1)规定动画的名称
(2)规定动画的时长
div
{
width:100px;
height:200px;
border:2px solid blue;
background-color:gray;
animation:myfirst 5s;
}
@keyframes myfirst
{
from { background:gray;}
to { background:blue ;}
}
必须定义动画的名称和时长。如果忽略时长,则动画不会允许,因为默认值是 0
div
{
width:100px;
height:200px;
border:2px solid blue;
background-color:gray;
animation:myfirst 5s;
position:relative;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}