<h1>Principle 10: Exaggeration</h1>
<h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2>
<article class="principle ten">
<div class="shape"></div>
</article>
.ten .shape {
animation: ten 4s infinite linear;
transform-origin: 50% 8em;
top: calc(50% - 6em);
}
@keyframes ten {
0%, 10% {
transform: none;
animation-timing-function: cubic-bezier(.87,-1.05,.66,1.31);
}
40% {
transform: rotateZ(-45deg) scale(2);
animation-timing-function: cubic-bezier(.16,.54,0,1.38);
}
70%, 100% {
transform: rotateZ(360deg) scale(1);
}
}
/* General styling */
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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.