CSS3实现动画效果
今天要⽤css3实现元素左右晃动的效果，先看⼀下css3中关于动画的属性说明:
CSS3 @keyframes 规则
如需在 CSS3 中创建动画，需要学习 @keyframes 规则。
@keyframes 规则⽤于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
Internet Explorer 10、Firefox 以及 Opera ⽀持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-@keyframes。
实例
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
动画是使元素从⼀种样式逐渐变化为另⼀种样式的效果。
您可以改变任意多的样式任意多的次数。
请⽤百分⽐来规定变化发⽣的时间，或⽤关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器⽀持，您应该始终定义 0% 和 100% 选择器。
实例
当动画为 25% 及 50% 时改变背景⾊，然后当动画 100% 完成时再次改变：
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
CSS3 动画属性
实例运⾏名为 myfirst 的动画，其中设置了所有动画属性：
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-
webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
上⾯是按照动画的标准属性进⾏配置的，也可以写成简写形式:
实例
与上⾯的动画相同，但是使⽤了简写的动画 animation 属性：
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}
下⾯开始进⼊正题。讲讲如何叫元素左右晃动:
⾸先设置@keyframes及元素的动画属性
<style>
.weui-badge{
display:inline-block;
padding:.15em .4em;
min-width:8px;
border-radius:18px;
background-color:#F43530;
color:#FFFFFF;
line-height:1.2;
text-align:center;
font-size:12px;
vertical-align:middle;
animation:move 3s 0s infinite;-webkit-animation:move 3s 0s infinite; transform-origin:bottom;-webkit-transform-origin:bottom;
}
@keyframes move
{
0%, 65%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
70% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
75% {
-
webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
80% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
85% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
90% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
95% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
100% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
}
@-webkit-keyframes move
{
0%, 65%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
70% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
75% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
80% {
-webkit-transform:rotate(6deg);
rotate属性transform:rotate(6deg);
}
85% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
90% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
95% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
100% {
-
webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
}
</style>
分析代码可以看出。通过设置@keyframes规则，让元素在0%-65%时没有动作，也就是不旋转⾓度，从70%-100%开始6度的摇摆.在类weui-badge样式中设置动画如下:
animation:move 3s 0s infinite;-webkit-animation:move 3s 0s infinite;
transform-origin:bottom;
-webkit-transform-origin:bottom;
也就是使⽤@keyframes规则 ，设置动画完成⼀个周期动作为3s，设置动画从0s开始，规定动画应该⽆限次播放(infinite)。
通过设置transform-origin:bottom将元素旋转基点设置成为底部中⼼点.默认值为元素的中⼼点。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论