A simple practice animation based from a challenge on https://100dayscss.com/
Codepen link: https://codepen.io/wickathou/full/jjZYGb
A Pen by Javier Hernandez on CodePen.
<div class="wrapper"> | |
<div class="frame" id="b1"> | |
<div class="center"> | |
<p id='areYouText'>are you?</p> | |
<p class="line" style="width:105px"></p> | |
<p class="line" style="width:85px"></p> | |
<p class="line" style="width:95px"></p> | |
</div> | |
</div> | |
<div class="frame" id="b2"> | |
<div class="center"> | |
<p id='howText'>How</p> | |
<p class="line" style="width:90px"></p> | |
<p class="line" style="width:85px"></p> | |
<p class="line" style="width:105px"></p> | |
</div> | |
</div> | |
<div class="frame" id="b3"> | |
<div class="center"> | |
<p id='helloText'>Hello</p> | |
<p class="line" style="width:75px"></p> | |
<p class="line" style="width:105px"></p> | |
<p class="line" style="width:95px"></p> | |
</div> | |
</div> | |
</div> |
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300); | |
.frame { | |
position: absolute; | |
display:flex; | |
top: 50%; | |
left: 50%; | |
width: 200px; | |
height: 200px; | |
margin-top: -200px; | |
margin-left: -200px; | |
border-radius: 25%; | |
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1); | |
overflow: hidden; | |
background: #fff; | |
color: #333; | |
font-family: 'Montserrat', Helvetica, sans-serif; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
.center { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%,-50%); | |
} | |
.line { | |
height:5px; | |
background:#000000; | |
border-bottom:5px; | |
} | |
.wrapper { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: perspective(60px); | |
transform-style: preserve-3d; | |
} | |
#b1 { | |
animation: movement1 6s ease-in-out infinite both; | |
} | |
@keyframes movement1 { | |
0%, 100% { | |
transform: translate3d(100%,75%,-5px); | |
opacity:0; | |
} | |
33% {transform: translate3d(-100%,-75%,-5px); | |
opacity:0; | |
} | |
66% { | |
transform: translate3d(0,0,10px); | |
opacity:1; | |
} | |
} | |
#b2 { | |
animation: movement2 6s ease-in-out infinite both; | |
} | |
@keyframes movement2 { | |
0%, 100% { | |
transform: translate3d(-100%,-50%,-5px); | |
opacity:0; | |
} | |
33% { | |
transform: translate3d(0,0,10px); opacity:1; | |
} | |
66% { | |
transform: translate3d(100%,50%,-5px); | |
opacity:0; | |
} | |
} | |
#b3 { | |
animation: movement3 6s ease-in-out infinite both; | |
} | |
@keyframes movement3 { | |
0%, 100% { | |
transform: translate3d(0,0,10px); | |
opacity:1; | |
} | |
33% { | |
transform: translate3d(100%,50%,-5px); | |
opacity:0; | |
} | |
66% { | |
transform: translate3d(-100%,-50%,-5px); | |
opacity:0; | |
} | |
} |
A simple practice animation based from a challenge on https://100dayscss.com/
Codepen link: https://codepen.io/wickathou/full/jjZYGb
A Pen by Javier Hernandez on CodePen.