Interactive loading CSS3 animations

In this chapter we will show you how to load interactive animations to your page. The main CSS3 properties used are animations, transitions, and transforms.

Example

Example with CSS3 animations loaded interactively (user activated):

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    background: rgb(26,26,26);  
}
h2 {
  width:90%;
  font-family:Arial; color:#e2e2e2; font-size:160%;
  }
div.anim {
    position:relative; float:left;
    width:35px; height:35px;
    top:30px; left:135px;
    margin: auto;
    background:darkgreen;
    transition: all 2s ease;
    /* ADD proprietary selectors if needed */
    animation: spin 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    /* ADD proprietary selectors if needed */
}
div.anim:nth-child(1) {
    animation-delay: 0.5s;
    /* ADD proprietary selectors if needed */
}
div.anim:nth-child(2) {
    animation-delay: 1s;
    /* ADD proprietary selectors if needed */
}
div.anim:nth-child(3) {
    left:30px;
    animation-delay: 1.5s;
    /* ADD proprietary selectors if needed */
}
@keyframes spin {
    to{ background:blue; }
}
div.anim:hover {
    border-radius:50%;
    transform: rotateZ(720deg);
    /* ADD proprietary selectors if needed */
}
</style>
</head>
<body>
  
  	<h2>Hover above the blocks</h2>

	<div class="anim"></div>
	<div class="anim"></div>
	<div class="anim"></div>
  
</body>

</html>

›› go to examples ››

Interactive loading CSS3 animations

Example

Example with CSS3 animations loaded interactively (user activated):

Comments

About

Contact

Get Connected