<p>⬇️  In this video, I'll show you how to program animated HTML, and in particular, Peekaboo boxes using CSS transitions. The transitions are triggered using only one line of JavaScript! The Peekaboo box can be animated into the web page at any desired scroll point.</p>
<ul>
<li>My <a target="_blank" href="https://codepen.io/EleftheriaBatsou">Codepen</a> projects </li>
<li>Working <a target="_blank" href="https://codepen.io/EleftheriaBatsou/pen/mdewyvz">project</a></li>
<li>Peekaboo <a target="_blank">Image</a></li>
<li><a target="_blank" href="http://www.developphp.com/">Inspiration</a></li>
<li><a target="_blank" href="https://youtu.be/Mp7jO6GGIHQ">Video tutorial</a></li>
</ul>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://www.youtube.com/watch?v=Mp7jO6GGIHQ">https://www.youtube.com/watch?v=Mp7jO6GGIHQ</a></div>
<hr />
<p><strong>Thank you for taking the time to watch my video.</strong></p>
<p>👋Hello, I'm Eleftheria, a front-end developer, master student, freelancer, public speaker, and chocolate lover.</p>
<p>🥰If you liked this post please share.</p>
<p>🍩Would you care about buying me a coffee? You can do it here: <a target="_blank" href="paypal.me/eleftheriabatsou">paypal.me/eleftheriabatsou</a> but If you can't that's ok too!</p>
<hr />
<p>🙏It would be nice to subscribe to my <a target="_blank" href="https://www.youtube.com/c/EleftheriaBatsou">Youtube</a> channel. It’s free and it helps to create more content.</p>
<p>🌈<a target="_blank" href="https://www.youtube.com/c/EleftheriaBatsou">Youtube</a> | <a target="_blank" href="https://codepen.io/EleftheriaBatsou">Codepen</a> | <a target="_blank" href="https://github.com/EleftheriaBatsou">GitHub</a> | <a target="_blank" href="https://twitter.com/BatsouElef">Twitter</a> | <a target="_blank" href="http://eleftheriabatsou.com/">Site</a> | <a target="_blank" href="https://www.instagram.com/elef_in_tech">Instagram</a></p>


⬇️  In this video, I'll show you how to program animated HTML, and in particular, Peekaboo boxes using CSS transitions. The transitions are triggered using only one line of JavaScript! The Peekaboo box can be animated into the web page at any desired scroll point.

- My [Codepen](https://codepen.io/EleftheriaBatsou) projects 
- Working [project](https://codepen.io/EleftheriaBatsou/pen/mdewyvz)
- Peekaboo [Image](Peekaboo image: https://derpicdn.net/img/2017/1/11/1337488/thumb.png)
- [Inspiration](http://www.developphp.com/)
- [Video tutorial](https://youtu.be/Mp7jO6GGIHQ)


%[https://www.youtube.com/watch?v=Mp7jO6GGIHQ]


**************************************
**Thank you for taking the time to watch my video.**

👋Hello, I'm Eleftheria, a front-end developer, master student, freelancer, public speaker, and chocolate lover.

🥰If you liked this post please share.

🍩Would you care about buying me a coffee? You can do it here: [paypal.me/eleftheriabatsou](paypal.me/eleftheriabatsou) but If you can't that's ok too!


**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/elef_in_tech)

🌍Peekaboo - Animations (JS + CSS) [YouTube LIVE]

💼 Community Manager
⌨ Developer | UXer | Content Creator


This is Eleftheria's blog. Feel free to read about public speaking, tech conferences, front-end, UI trends and best practices, ux research and case studies along side with many posts about motivation.

🌍Peekaboo - Animations (JS + CSS) [YouTube LIVE]

Did you find this article valuable?