Text transition effect inspired by this youtube video: Game of Thrones Season 5: A Day in the Life (HBO)
Currently Webkit only!
A Pen by Daniel Gooß on CodePen.
<h1>Figcaption <strong>Animation</strong></h1> | |
<figure class="stage"> | |
<img src="http://cinemagraphs.com/images/demo/cab-window-429.gif" alt="" /> | |
<figcaption class="mark"> | |
<time datetime="" class="info fade"><strong>8:00</strong>AM</time> | |
<p class="description fade"><strong>New York |</strong> United States</p> | |
</figcaption> | |
</figure> | |
<figcaption class="copyright">Image by <a href="http://cinemagraphs.com/nyc/">Cinemagraph</a>™</figcaption> |
html{ | |
height: 100%; | |
background: linear-gradient(90deg, #444c4c 0%, #291020 100%) no-repeat fixed; | |
font-family: 'Ubuntu', sans-serif; | |
font-weight: 300; | |
-webkit-font-smoothing: antialiased; | |
} | |
body { | |
padding: 0 20px 20px; | |
color: #fff; | |
} | |
a { | |
color: inherit; | |
} | |
strong { | |
font-weight: 500; | |
} | |
h1 { | |
font-weight: 300; | |
} | |
.copyright { | |
opacity: 0.25; | |
transition: opacity 0.5s ease-in-out; | |
&:hover { | |
opacity: 1; | |
} | |
} | |
.stage { | |
position: relative; | |
margin: 0 -20px 1em; | |
img { | |
display: block; | |
width: 100%; | |
} | |
.mark { | |
position: absolute; | |
bottom: 30px; | |
left: 30px; | |
color: #fff; | |
font-size: 24px; | |
} | |
} | |
.mark { | |
display: inline-block; | |
text-transform: uppercase; | |
.stage:hover & { | |
.fade { | |
-webkit-mask-position-x: 0%; | |
} | |
strong { | |
transform: none; | |
transition-delay: 0; | |
} | |
.description { | |
transition-delay: 0.75s; | |
transition-duration: 3s; | |
} | |
} | |
strong { | |
display: inline-block; | |
transform: translateY(100%); | |
transition: transform 1s ease; | |
transition-delay: 1.5s; | |
} | |
p { | |
margin: 0; | |
} | |
.fade { | |
mask-image: linear-gradient(90deg, #000 0%, #000 33.33%, transparent 66.66%); | |
-webkit-mask-size: 300%; | |
-webkit-mask-position-x: 100%; | |
transition: -webkit-mask-position-x 2s ease; | |
} | |
.description { | |
transition-delay: 0; | |
} | |
} | |
.stage::before { | |
content: 'Hover me'; | |
position: absolute; | |
right: 0; | |
padding: 10px; | |
background-color: #444c4c; | |
opacity: .6; | |
} |
Text transition effect inspired by this youtube video: Game of Thrones Season 5: A Day in the Life (HBO)
Currently Webkit only!
A Pen by Daniel Gooß on CodePen.