How to make animations code work in css? [ the code isn't working for me...]

css animation examples
css animation transition
css animation on hover
css animation generator
css animation codepen
simple text animation css
css animation library
css animation keyframes

I can't seem to find my mistake can you please help me?

I have put the -webkit- prefixes, also all elements are Valid

here's the code:

 div {
width:200px;
height:200px;
background-color:red;

-webkit-animation-name: easter;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: reverse;

}
@-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}
<div>
hi
</div>

You need add position :relative; to your css

div {
width:200px;
height:200px;
background-color:red;
 position :relative;
-webkit-animation: easter 5s infinite;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: reverse;
animation: easter 5s infinite;
}
@-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}
<!DOCTYPE html>
<html>
<head>
<style> 

</style>
</head>
<body>

<div>
hi
</div>
</body>

CSS Animations, To get an animation to work, you must bind the animation to an element. The animation code */ normal - The animation is played as normal (forwards). CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.

First of all the webkit prefix will only apply to chromium based browsers. Second in order for top to apply you need to specifiy a position like absolute or relative:

div {
  width:200px;
  height:200px;
  background-color:red;
  position: absolute;

  -webkit-animation-name: easter;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-delay:1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: reverse;
  animation-name: easter;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-delay:1s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

@-webkit-keyframes easter {
  from {top: 0px;}
  to {top: 200px;}
}
<div>
hi
</div>

Using CSS animations, CSS animations make it possible to animate transitions from one CSS This is pretty standard code; you can get details on how it works in the� Drawing a line seems like a nice, comfortable place to start when learning CSS animations. The animation itself is fairly simple, therefore the code required is pretty minimal and easy to follow.

Additional information to the answer of @Hien Nguyen, I would suggest you to use the following syntax when using animations ans working with @keyframes in order to increase browsers comptability:

/* Safari 4.0 - 8.0 */
@-webkit-keyframes easter {
  from {top: 0px;}
  to {top: 200px;}
}

/* Standard syntax */
@keyframes easter {
  from {top: 0px;}
  to {top: 200px;}
}

Instead of:

@-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}

Transitions & Animations, Transitions and animations have worked there way into CSS3, providing This is intentionally un-prefixed in the interest of keeping the code snippet small and� 24. Info Card Hover Animation. Rating: ★★★ View CSS code. 25. Fancy Button Animation. Rating: ★★★★ View CSS code. These are all fresh CSS/CSS3 animation examples we’ve gathered for you. We hope they can inspire you. 5 Best CSS Animation Website Examples. While searching for the best CSS animation, we have found some creative

Tips for Writing Animation Code Efficiently, I've been coding web animations and helping others do the same for years now. Using one consistent tool for all your animations is much cleaner. Most anytime you need your animations to run in a sequence, you should� Master the art of adding animation to your websites and pick the right tools for the job. Create animations and transitions using CSS3; Learn the building blocks of how animation works in Javascript; Leverage animation frameworks that take care of the hard work and let you animate quickly. Follow along with the included source code

animation, This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before� The code script is a little complex when compared to other CSS animation examples, but it is easy-to-understand. Plus, the developers can easily work with this code and make it fit for their needs. Info / Download Demo

Working on some css animation, using notepad ++ not all code is , Hello all this is what I have: .star01 { position: relative; top: 20px; left: 20px; - webkit-animation-name: slide; -webkit-animation-duration: 2s; } @-webkit- keyframe� About the code CSS Animation: Indoors or Outdoors? Recently was involved in a project where we had to do animations. We used After Effects > JSON > some plugin magic for it but I was wondering if I could replicate the exact same effect with CSS.

Comments
  • What doesn't work? Doesn't it work on other browsers than browsers based on chromium? Thats because of the prefix that only applies to chromium.
  • exactly what type of animation do u want do you want to get it bottom or what
  • Add this to your code position :relative;
  • If any of the answers helped you, you should check it as the answer. This will help other users as well

Hot Questions

  • How to update the configuration files in WAS Liberty once after deployment Can it not be like Tomcat web server?1770
  • How to select a variable length string from between two known strings in SQL Server in a VARCHAR(MAX) where some columns don't have applicable strings1991
  • Compare two sheets and highlight unmatched rows using unique ID only4207
  • Prevent collapse of empty rows in HTML table via CSS8560
  • meld - gi._glib.GError: Icon 'meld-change-apply-right' not present in theme. What is wrong with the installation?4512
  • Cleaning up debug commits in git9869
  • Reading values from Excel workbook in every worksheet in particular column6300
  • Can you initialize an Enum value from the name of its case (*not* its RawValue?)5094
  • Prompt user for password with dialog window when using sudo7107
  • ERROR hive.HiveConfig: Could not load org.apache.hadoop.hive.conf.HiveConf. Make sure HIVE_CONF _DIR is set correctly6862
  • Android data binding, cannot generate view binders2350
  • Too many re-renders. React limits the number of renders to prevent an infinite loop. Updating state of a functional component inside the render method547
  • How can i determine the country code just by looking at the number3241
  • Python word counter2798
  • Python load json file with UTF-8 BOM header7434
  • How to popup javascript modal with code instead of button click5483
  • Iterating on a file doesn't work the second time5287
  • Can't use PrimeFaces with Maven989
  • Asp.net MVC: Additional fields are not binding for Remote validation3217
  • Model.where() with multiple params with check if they are present in rails462