CSS动画

标签：bottom   margin   idt   duration   height   ini   anim   inf   flow   

HTML:

-(1..9).each do
%div{:class => ‘wrap‘}
%div{:class => ‘translate‘}
%div{:class => ‘scale‘}

CSS：

$bg: #111;
$size: 14px;
$expand: 600%;
$total: 9;
$duration: 2000ms;
$easing: cubic-bezier(0.6, -0.28, 0.735, 0.045);

body {
background: $bg;
overflow: hidden;
}

.wrap {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}

.translate {
animation: translate $duration $easing infinite;
bottom: 0;
height: $size;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: $size;
}

.scale {
animation: scale $duration $easing infinite;
height: 100%;
width: 100%;
}

@for $i from 1 through $total {
.wrap:nth-child(#{$i}) {
$j: $total - $i;
transform: rotate(360deg / $total * $j);
}

.wrap:nth-child(#{$i}) .translate,
.wrap:nth-child(#{$i}) .scale {
animation-delay: ($i - 1) * (-$duration / $total);
}

.wrap:nth-child(#{$i}) .scale {
background: hsl(360 / $total * $i * 2, 100%, 70%);
}
}

@keyframes translate {
0% {
transform: translate3d(-$expand, 0, 0);
}
50% {
transform: translate3d($expand, 0, 0);
}
100% {
transform: translate3d(-$expand, 0, 0);
}
}

@keyframes scale {
0% {
transform: translateZ(0) scale(0.75, 1);
}
25% {
transform: translateZ(0) scale(1.5, 0.5);
}
50% {
transform: translateZ(0) scale(0.75, 1);
}
75% {
transform: translateZ(0) scale(1.5, 0.5);
}
100% {
transform: translateZ(0) scale(0.75, 1);
}
}

CSS动画

标签：bottom   margin   idt   duration   height   ini   anim   inf   flow   

原文地址：http://www.cnblogs.com/gnaygnaw/p/6545435.html