Hi everyone,

The animation property in CSS is a pretty cool feature that can be used to create nice animations by just using CSS and leaving JS out of the process. In this post, I am going to show you some basic examples of CSS animation and how to create a smooth background-image zoom-in and zoom-out animation by simply using CSS.


Let me start with giving an example on the 'background-color' property. In order to create the animation, we would want to set some keyframes using the '@keyframes' property. Each @keyframes at-rule defines what should happen at specific moments during the animation. For example, 0% is the first frame of the animation and 100% is the last. Usually, it is common to use 5 main keyframes (0th-25th-50th-75th-100th) for the majority of the animations but you can set as many keyframes as you would like for your animation.

The following code enables the background-color to change into 4 different colors in a 10 second period:


 html,
 body {
   height: 100%;
 }

 .mydiv {
   width:100%;
   height:100%;
   color:black;
   font-weight:bold;
   animation: myanimation 10s infinite;
 }

 @keyframes myanimation {
   0% {background-color: red;}
   25%{background-color:yellow;}
   50%{background-color:green;}
   75%{background-color:brown;}
   100% {background-color: red;}
 }


The HTML code to complement this CSS is the following:


<div class="mydiv">The background-color changes in time</div>


See the Pen GqrMvo by Berk (@herrberk) on CodePen.
In the example above, we created an animation called 'myanimation' and assigned this to the element called 'mydiv'. But what if we want to apply our keyframes to multiple elements? Yes, it is possible!

Let's have a look at a full animation declaration for an element;



.myotherdiv{
 animation-name: myanimation;
 animation-duration: 10s;  /* 10  Seconds*/
 animation-delay: 2s;  /*2 Seconds Delayed*/
 animation-timing-function: linear; /*ease — the default */
    /*ease-in-out — similar to ease*/
    /*ease-in — starts slowly, */
    /*but accelerates and stops abruptly.*/
    /*ease-out — starts quickly, stop slowly.*/
                                /*linear — constant speed */
 animation-iteration-count: infinite;/* Can be any positive value. */
 animation-direction: alternate; /*normal — default ( 0 to 100 ) */
              /*reverse (100 to 0) */
       /*alternate — forward then the reverse and continues*/
       /*alternate-reverse — reverse of the alternate*/

}


And finally, I am going to show you how to create the zoom-in and out animation on your background images. It is great to be able to implement this animation by just using CSS3 and nothing else! Let's start:


 /* The outermost element*/
 .header-wrapper {
   overflow: hidden;
   width:400px;
   height:200px;
   text-align:center;
 }

 .zoominheader {
   width:400px;
   height:200px;
   text-align:center;
   background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGPVsX59v5cE2O7aKhYeG8_CtfWOBY0UzPgQdXo3C840zSHeFLThk1h2h0RfkYuHebV62RyNgwCZofM0oZ4fgPJieIn4F350w8T8uu1NVUsycBIrXaRSqwB1UrFYgElKE5SIcTlFBOJ_g/s400-p/sts-min.jpg");
   background-size: auto;
   background-attachment: fixed;
   background-repeat: repeat;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -webkit-animation: zoomin 10s ease-in infinite;
   animation: zoomin 10s ease-in infinite;
   transition: all .5s ease-in-out;
   overflow: hidden;
 }

 /* The innermost element*/
 .zoomoutheader {
   width:400px;
   height:200px;
   text-align:center;
   background: none;
   -webkit-animation: zoomout 10s ease-in infinite;
   animation: zoomout 10s ease-in infinite;
   transition: all .5s ease-in-out;
   overflow: hidden;
 }

 /* Zoom in Keyframes */
 @-webkit-keyframes zoomin {
   0% {transform: scale(1);}
   50% {transform: scale(1.5);}
   100% {transform: scale(1);}
 }
 @keyframes zoomin {
   0% {transform: scale(1);}
   50% {transform: scale(1.5);}
   100% {transform: scale(1);}
 } /*End of Zoom in Keyframes */

 /* Zoom out Keyframes */
 @-webkit-keyframes zoomout {
   0% {transform: scale(1);}
   50% {transform: scale(0.67);}
   100% {transform: scale(1);}
 }
 @keyframes zoomout {
   0% {transform: scale(1);}
   50% {transform: scale(0.67);}
   100% {transform: scale(1);}
 }/*End of Zoom out Keyframes */

 /*Style for the text*/
 .text{
   color:red;
   font-weight:bold; 
 }


There are two different animations in this example: zoomin and zoomout. Zoomin is applied to the element that we have the background image and zoomout is applied to the innermost element. Finally, the outermost element contains both the previous elements and its overflow is set to 'hidden' to prevent the scaled background to go over the borders of the outermost element. The following is the HTML code to be able to use the animation:


<div class="header-wrapper">
  <div class="zoominheader">
    <div class="zoomoutheader">
      </br></br>
      </br></br>
      <p class="text"> Hello, this is a text!</p>
    </div>
  </div>
</div>


See the Pen ZOLJmy by Berk (@herrberk) on CodePen.
As you have probably noticed, the zoomin scale is 1.5 and the zoomout scale is 0.67 (0.6666667). You are free to select any combination of these numbers with one condition: their multiplication has to give the result '1'. However, since we are using two opposite animations to keep the innermost element at scale '1', there might be a slight inevitable change on the innermost element.

Alright that's all for this post. Please leave a comment if you have any questions or comments! Also do not forget to share this post with your friends!

Keywords: HTML Code Snippets, CSS3
Author:

Software Developer, Codemio Admin

Disqus Comments Loading..