Css3动画变化时间,CSS3 5个时间函数动画对比

CSS

语言：

CSSSCSS

确定

* {

-webkit-transition: opacity 0.5s ease;

transition: opacity 0.5s ease;

}

body {

background: #232a3e;

background-image: url("http://frolovoleg.ru/images/16.svg");

}

.timeFunctions {

color: rgba(255, 255, 255, 0.2);

position: absolute;

font-size: 12px;

font-family: monospace;

padding-top: 11px;

padding-left: 16px;

}

.timeFunctions .ease,

.timeFunctions .ease-in,

.timeFunctions .ease-out,

.timeFunctions .ease-in-out,

.timeFunctions .cubic-bezier {

line-height: 32px;

opacity: 0.4;

}

.timeFunctions .ease:hover,

.timeFunctions .ease-in:hover,

.timeFunctions .ease-out:hover,

.timeFunctions .ease-in-out:hover,

.timeFunctions .cubic-bezier:hover {

cursor: pointer;

}

.timeFunctions .ease {

color: #2cc0ff;

}

.timeFunctions .ease-in {

color: #2cff7a;

}

.timeFunctions .ease-out {

color: #ffe92c;

}

.timeFunctions .ease-in-out {

color: #ff832c;

}

.timeFunctions .cubic-bezier {

color: #ff2c42;

opacity: 1;

}

.cubic-bezier {

color: rgba(255, 255, 255, 0.8);

}

.dot {

width: 48px;

height: 48px;

border-radius: 50%;

background: #2cc0ff;

position: absolute;

top: 100%;

left: 0%;

opacity: 0.2;

margin-top: -48px;

-webkit-animation: Anime 2s ease alternate infinite;

animation: Anime 2s ease alternate infinite;

}

.dot2 {

width: 48px;

height: 48px;

border-radius: 50%;

background: #2cff7a;

position: absolute;

top: 100%;

left: 0%;

opacity: 0.2;

margin-top: -48px;

-webkit-animation: Anime 2s ease-in alternate infinite;

animation: Anime 2s ease-in alternate infinite;

}

.dot3 {

width: 48px;

height: 48px;

border-radius: 50%;

background: #ffe92c;

position: absolute;

top: 100%;

left: 0%;

opacity: 0.2;

margin-top: -48px;

-webkit-animation: Anime 2s ease-out alternate infinite;

animation: Anime 2s ease-out alternate infinite;

}

.dot4 {

width: 48px;

height: 48px;

border-radius: 50%;

background: #ff832c;

position: absolute;

top: 100%;

left: 0%;

opacity: 0.2;

margin-top: -48px;

-webkit-animation: Anime 2s ease-in-out alternate infinite;

animation: Anime 2s ease-in-out alternate infinite;

}

.dot5 {

width: 48px;

height: 48px;

border-radius: 50%;

background: #ff2c42;

position: absolute;

top: 100%;

left: 0%;

opacity: 0.2;

margin-top: -48px;

-webkit-animation: Anime 2s cubic-bezier(0, 0.8, 1, 0.2) alternate infinite;

animation: Anime 2s cubic-bezier(0, 0.8, 1, 0.2) alternate infinite;

opacity: 1;

}

.wrap {

width: 48px;

position: absolute;

height: 100vh;

left: 0%;

-webkit-animation: Anime2 2s linear alternate infinite;

animation: Anime2 2s linear alternate infinite;

}

@-webkit-keyframes Anime {

0% {

top: 100%;

margin-top: -48px;

}

100% {

top: 0%;

margin-top: 0px;

}

}

@keyframes Anime {

0% {

top: 100%;

margin-top: -48px;

}

100% {

top: 0%;

margin-top: 0px;

}

}

@-webkit-keyframes Anime2 {

0% {

left: 0%;

margin-left: 0px;

}

100% {

left: 100%;

margin-left: -48px;

}

}

@keyframes Anime2 {

0% {

left: 0%;

margin-left: 0px;

}

100% {

left: 100%;

margin-left: -48px;

}

}