过渡
.pushnew{
position: fixed;
z-index: 50;
left: 0;
top: 50%;
transition: transform 0.3s;
}
.pushnewsani{
transform: translateX(-279px);
-webkit-transform: translateX(-279px);
}
** 帧动画 **
animation:name duration timing-function delay iteration-count direction animation-fill-mode;
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;/* Firefox */
-webkit-animation: myfirst 5s;/* Safari 和 Chrome */
-o-animation: myfirst 5s;/* Opera */
}
值描述
animation-name规定需要绑定到选择器的 keyframe 名称。
animation-duration规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function规定动画的速度曲线。-moz-animation-timing-function / -webkit-animation-timing-function
值描述测试
linear动画从头到尾的速度是相同的。
ease默认。动画以低速开始，然后加快，在结束前变慢。
ease-in动画以低速开始。
ease-out动画以低速结束。
ease-in-out动画以低速开始和结束。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
steps(1,start)/step-start/step-end。
steps的设置都是针对两个关键帧之间的，而非是整个keyframes
steps 函数指定了一个阶跃函数
第一个参数指定了时间函数中的间隔数量（必须是正整数）
第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。
step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；
step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。
@-webkit-keyframes circle {
0% {background: red}
50%{background: yellow}
100% {background: blue}
}
step-start ： 黄色与蓝色相互切换
step-end ： 红色与黄色相互切换
2个参数都会选择性的跳过前后部分，start跳过0%，end跳过100%
step-start在变化过程中，都是以下一帧的显示效果来填充间隔动画，所以0% 到 50% 直接就显示了黄色yellow
step-end与上面相反，都是以上一帧的显示效果来填充间隔动画，所以0% 到 50% 直接就显示了红色red
animation-delay规定在动画开始之前的延迟。
animation-iteration-count规定动画应该播放的次数。
animation-iteration-count:n|infinite;
animation-direction规定是否应该轮流反向播放动画。
值描述测试
normal默认值。动画应该正常播放。
alternate动画应该轮流反向播放。
animation-fill-mode : none | forwards | backwards | both;
animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。
值描述
none不改变默认行为。
forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both向前和向后填充模式都被应用。
实例example
@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;}
}
%
@keyframes myfirst{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst/* Firefox */{
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;}
}
@-o-keyframes myfirst/* Opera */{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
/* 箭头上下 /
/ 缩放 */
.updown {
animation: flight 2s ease-in-out 0s infinite alternate none;
-webkit-animation: flight 2s ease-in-out 0s infinite alternate none;
}
@keyframes flight{
0% {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
opacity: 0.2;
}
100% {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-o-transform: translateY(-20px);
transform: translateY(-20px);
opacity: 0.6;
}
}
@-webkit-keyframes flight{
0% {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
opacity: 0.2;
}
100% {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-o-transform: translateY(-20px);
transform: translateY(-20px);
opacity: 0.6;
}
}
.e-women{
/* background-position: 100% top; */
background-repeat: no-repeat;
background-size: 24.47rem;
border-radius: 0.36rem;
overflow: hidden;
position: relative;
-webkit-animation: equipment 2s steps(7,start) infinite alternate forwards;
animation: equipment 2s steps(7,start) infinite alternate forwards;
}
@keyframes equipment {
from{
background-position: 0 0;
}
to{
background-position: -21.43rem 0 ;
}
}
@-webkit-keyframes equipment {
from{
background-position: 0 0;
}
to{
background-position: -21.43rem 0 ;
}
}
网友评论