css3动画功能
transition
用法:
-moz-transition:
-webkit-transition:
-o-transition:
transition:property duration timing-function delay
transition-property
属性规定应用过渡效果的css属性的名称
none没有属性获得过渡效果
all所有属性都将获得过渡效果
property定义应用过渡效果的css属性名称列表,列表以逗号分隔
transition-duration
变换延续的时间
transition-timing-function
在延续的时间段,变换的速率变化
ease速率变慢
linear匀速
ease-in加速
ease-out减速
ease-in-out先加速后减速
cubic-bezier(n,n,n,n)
transition-delay
延迟时间
div{
width: 100px;
height: 100px;
background-color: red;
transition: all 5s linear 0;
}
div:hover{
background-color: yellow;
}
animations
用法:
@-webkit-keyframes:关键帧合合集名称(创建关键帧的代码)
0%-100%{
$关键帧中的样式
}
元素{
-webkit-animations-name:mycolor;
}
div{
height: 20px;
background-color: red;
}
@keyframes mycolor{
0%{
background-color: red;
width: 0;
transform: rotate(0deg);
transform: translate(0px,0px);
}
10%{
background-color: yellow;
width:20px;
transform: rotate(10deg);
transform: translate(100px,0px);
}
20%{
background-color: green;
width: 50px;
transform: rotate(30deg);
}
80%{
background-color: black;
width: 150px;
transform: rotate(100deg);
}
100%{
background-color: white;
width: 200px;
transform: rotate(180deg);
}
}
div{
animation-name: mycolor;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}