【CSS3中的动画功能】
/* 1.Transition功能,通过指定开始结束状态来过度,无法实现复杂动画。*/ /* transition:property duration timing-function */ transition-property: background-color; transition-duration: 3s; transition-timing-function: linear; transition: background-color 3s linear; /*简洁的写法*/ transition: background-color 1s linear,color 1s linear,width 1s linear; /* 同时执行多个动画效果 */ /* 2.Animations功能,可以指定帧,实现复杂的动画。 */ @-webkit-keyframes mycolor { 0% /*开始帧*/ { background-color:red; } 40% /*背景颜色变化帧 - 黄色*/ { background-color:#ffff00; } 70% /*背景颜色变化帧 - 蓝色*/ { background-color:aqua; } 100% /*结束帧*/ { background-color:red; } } div:hover { -webkit-animation:mycolor 5s linear; } /* 实现多个属性值同时改变的动画 */ @-webkit-keyframes mycolor { 0% { background-color:Red; transform:rotate(0deg); } 30% { background-color:aqua; transform:rotate(30deg); } 60% { background-color:lightskyblue; transform:rotate(-30deg); } 100% { background-color:Red; transform:rotate(0deg); } } div:hover { -webkit-animation-name:mycolor; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; } /*参数含义*//* linear:匀速 ease-in:又慢到快 ease-out:由快到慢 ease:先慢再快再慢 ease-in-out:先慢再快再慢*/
时间: 2024-11-06 12:53:50