how to animate div in css code example

Example 1: css animation

<style>
.my-element {
  width: 100%;
  height: 100%;
  animation: tween-color 5s infinite;
}

@keyframes tween-color {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: red;
  }
}

html,
body {
  height: 100%;
}
<style>

<body>
	<div class="my-element"></div>
</body>

Example 2: how to animate div display

<!-- Here's a way to animate/transition 
the opacity and display of your div! -->
<style>
  /*This is a fade in example.*/
  @keyframes fadeIn {
    0% {display:none; opacity:0;}
    1% {display:block; opacity:0;}
    100% {display:block; opacity:1;}
  }
  /*This is a fade out example. */
  @keyframes fadeOut {
    0% {display:block; opacity:1;}
    1% {display:none; opacity:1;}
    100% {display: none; opacity:0;}
  }
  #animate {
    /*put animation attributes here. Here's a list.
    (https://www.w3schools.com/css/css3_animations.asp)*/
    animation-duration: 2s;
    animation-iteration-count: 1;
    /*put the default display and opacity here, the same as "0%"*/
    display: none;
    opacity: 0;
  }
</style>
<script>
  function appear() {
    document.getElementById('animate').style.animationName = "example";
    /* you can also change the display completely after the animation 
    is done. (setTimeout, same time as animation-duration). For example,
    setTimeout after 2 seconds, and make function .style.display = "block";
    and style.opacity = "1"; to make the change permanent. */
  }
</script>
<!-- You can put anything to activate the function, by the way. -->
<button onclick="appear()"> example </button>
<!-- This div is what's being animated, which explains why the function
appear() has 'animate' in it. -->
<div id="animate"> </div>

Example 3: adding animation to images css

basic animation drop

//drop is variable named for the animation

@keyframes drop {
	0% {
		opacity: 0;
		transform: translateY(-80px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

img {
animation: drop 500ms ease;
}

Tags:

Css Example

Recent Posts