在用css3创建动画效果之前,首先要先了解下@keyframes 规则
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
类似这个,from,to相当于0%和100%,也就是起始跟结束时的状态
myfirst就是你定义的动画效果名称,可以把它捆绑到任意一个选择器里。
当你需要在某个选择器使用这个动画效果的时候,就需要用animation,他可以捆绑写好的动画效果
div
{
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
这里直接复制的w3school的例子,应该很容易看懂
animation有很多个属性,可以根据自己要求去查找,包括规定时长,速度,循环次数之类的
另外,还有一个标签,transform
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
一般晃动旋转之类的特效做起来看起来比较炫酷
举几个例子,比如做一个地球转动的效果,结合animation的动画效果和transform的rotate就很好实现
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.Rotation{
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}
还有左右晃动效果
@-webkit-keyframes shakelr
{
0% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
33% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
66% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
}
.shakelr {
transform-origin: center;
-webkit-transform-origin: center;
animation: shakelr 1s infinite alternate ease-in-out;
-webkit-animation: shakelr 1s infinite alternate ease-in-out;
}
上下晃动效果
@keyframes shaketb {
0%,100%,20%,50%,80% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
40% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
60% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px)
}
}
.shaketb {
animation: shaketb 1.5s infinite alternate ease-in-out;
-webkit-animation: shaketb 1.5s infinite alternate ease-in-out;
}
这只是最简单的效果,如果还要做的更炫可能还要配合其他的属性之类的