网络动画设计HTML5,HTML5 Web动画设计原则之10 - 夸张

CSS

语言：

CSSSCSS

确定

.ten .shape {

-webkit-animation: ten 4s infinite linear;

animation: ten 4s infinite linear;

-webkit-transform-origin: 50% 8em;

-ms-transform-origin: 50% 8em;

transform-origin: 50% 8em;

top: calc(50% - 6em);

}

@-webkit-keyframes ten {

0%, 10% {

-webkit-transform: none;

transform: none;

-webkit-animation-timing-function: cubic-bezier(0.87, -1.05, 0.66, 1.31);

animation-timing-function: cubic-bezier(0.87, -1.05, 0.66, 1.31);

}

40% {

-webkit-transform: rotateZ(-45deg) scale(2);

transform: rotateZ(-45deg) scale(2);

-webkit-animation-timing-function: cubic-bezier(0.16, 0.54, 0, 1.38);

animation-timing-function: cubic-bezier(0.16, 0.54, 0, 1.38);

}

70%,

100% {

-webkit-transform: rotateZ(360deg) scale(1);

transform: rotateZ(360deg) scale(1);

}

}

@keyframes ten {

/* General styling */

0%, 10% {

-webkit-transform: none;

transform: none;

-webkit-animation-timing-function: cubic-bezier(0.87, -1.05, 0.66, 1.31);

animation-timing-function: cubic-bezier(0.87, -1.05, 0.66, 1.31);

}

40% {

-webkit-transform: rotateZ(-45deg) scale(2);

transform: rotateZ(-45deg) scale(2);

-webkit-animation-timing-function: cubic-bezier(0.16, 0.54, 0, 1.38);

animation-timing-function: cubic-bezier(0.16, 0.54, 0, 1.38);

}

70%,

100% {

-webkit-transform: rotateZ(360deg) scale(1);

transform: rotateZ(360deg) scale(1);

}

}

body {

margin: 0;

background: #e9b59f;

font-family: HelveticaNeue, Arial, Sans-serif;

color: #fff;

}

h1 {

position: absolute;

top: 0;

left: 0;

right: 0;

text-align: center;

font-weight: 300;

}

h2 {

font-size: 0.75em;

position: absolute;

bottom: 0;

left: 0;

right: 0;

text-align: center;

}

a {

text-decoration: none;

color: #333;

}

.principle {

width: 100%;

height: 100vh;

position: relative;

}

.shape {

background: #2d97db;

border: 1em solid #fff;

width: 4em;

height: 4em;

position: absolute;

top: calc(50% - 2em);

left: calc(50% - 2em);

}