css cubic-bezier,CSS3 cubic-bezier 函数功能演示

CSS

语言：

CSSSCSS

确定

body {

font: normal 15px/1.9em 'Merriweather', Georgia, serif;

width: 100vw;

height: 100vh;

text-align: center;

background-color: #f4f4f6;

}

.post-demo-content {

padding: 2em 2em 2em 4em;

}

.mnc-demo-container {

height: 100px;

width: 100px;

}

.mnc-demo-container-inline {

display: inline-block;

position: relative;

margin-right: 60px;

margin-bottom: 30px;

margin-top: 15px;

text-align: left;

}

.mnc-demo-container-inline:last-child {

margin-right: 0;

}

.mnc-demo-label {

position: absolute;

bottom: -38px;

color: #666;

font-size: 11px;

text-align: center;

width: 100%;

}

.mnc-demo-grid {

overflow: hidden;

border: 2px solid rgba(0, 0, 0, 0.2);

height: 100%;

width: 100%;

}

.mnc-demo-line {

width: 100%;

height: 2px;

background-color: rgba(0, 0, 0, 0.2);

position: absolute;

}

.mnc-demo-line-vertical {

width: 2px;

height: 100%;

background-color: rgba(0, 0, 0, 0.2);

position: absolute;

}

.mnc-demo-dot {

will-change: transform;

-webkit-animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);

animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);

position: absolute;

bottom: -10px;

left: -10px;

}

.mnc-demo-dot:after {

content: '';

display: block;

will-change: transform;

width: 20px;

height: 20px;

border-radius: 20px;

background-color: #fff;

-webkit-animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);

animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);

}

.mnc-demo-dot-final::after {

-webkit-animation: none;

animation: none;

}

.mnc-demo-container-inline .mnc-demo-dot:after {

background-color: #333;

}

.mnc-demo-dot-final-x {

-webkit-animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);

animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);

}

.mnc-demo-dot-final-y {

-webkit-animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);

animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);

}

@-webkit-keyframes xAxis {

50% {

-webkit-animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);

animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);

-webkit-transform: translateX(100px);

transform: translateX(100px);

}

}

@keyframes xAxis {

50% {

-webkit-animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);

animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);

-webkit-transform: translateX(100px);

transform: translateX(100px);

}

}

@-webkit-keyframes yAxis {

50% {

-webkit-animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);

animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);

-webkit-transform: translateY(-100px);

transform: translateY(-100px);

}

}

@keyframes yAxis {

50% {

-webkit-animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);

animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);

-webkit-transform: translateY(-100px);

transform: translateY(-100px);

}

}