background - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:background

  1. HOME
  2. HTML CSS
  3. CSS Animatable Property
  4. background

Introduction

Only the background-color, background-position, and background-size properties among the background properties are animatable in CSS.

-webkit- prefix is for Chrome, Safari, Opera.

-moz- prefix is for Firefox.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS background Property Animation</title>
  <style type="text/css">
.animated {<!--   ww w  .  ja  va  2  s .  c  om-->
    width: 300px;
    height: 175px;
    background: url("https://www.java2s.com/style/demo/Opera.png") no-repeat -50px -50px black;
    background-size: 10%;
    -webkit-animation: test 4s infinite; 
    animation: test 4s infinite;
}

@-webkit-keyframes test {
  50% {
    background-color: floralwhite;
    background-position: center;
    background-size: 40%;
  }
}

@keyframes test {
    50% {
    background-color: floralwhite;
    background-position: center;
    background-size: 40%;
  }
}
</style>
 </head>
 <body>

  <p> </p>
  <div class="animated"></div>
 </body>
</html>

Related Tutorials