HTML was created as a way of transferring and displaying static information. As the Internet has evolved and the WWW has morphed into what it is today, dynamic information and visual media have become commonplace. The WWW has seen animated GIFs, Flash, JavaScript, audio and video and more added to the mix.
In this post:
Required knowledge:
Deprecated, Discouraged, & not CSS
Except for a few odd cases along the way — such as the now deprecated (and vilified) <marquee> tag — HTML has remained static.
The introduction of CSS has only recently changed this, and we now have access to ***things*** such as CSS3’s Animatable.
Behaviours such as the above were then created using JavaScript (as if this made them any less of a crime). JavaScript was to become the primary method for creating webpages that could change dynamically on the client side, until…
Animatable
CSS3 introduces animatable properties that can be applied to HTML elements.
<style>
#myDIV {
width: 200px;
margin: auto;
border: 3px solid green;
line-height: 100px;
height: 100px;
animation: mymove 5s infinite;
}
p#anime {
text-align: center;
margin: auto;
}
@keyframes mymove {
50% {border: 15px solid lightblue;}
}
</style>
<div id="myDIV"><p id="anime">Look at me!</p></div>
Look at me!
References:
- <marquee>: The Marquee element – HTML: HyperText Markup Language | MDN. [online]. Available at: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee (Date Accessed: 13 August 2023)
- CSS Animatable. [online]. Available at: https://www.w3schools.com/cssref/css_animatable.php (Date Accessed: 13 August 2023)
- Html Marquee Tag | change marquee speed, behavior, Scrollamount, Scrolldelay. [online]. Available at: https://tutorial.techaltum.com/marquee.html (Date Accessed: 24 August 2023)