How to have two css animations in one tag


Tags: html,css,animation,web

Problem :

I am working with css animations and I have a series of animations with different css tags. I start at #water then go to other animations then I want to go back to #water with a different animation. This is my code:

#water {
    position: relative;
    left: 48px;   
    z-index: 1;
    opacity: 0;
    width: 197px;
    -webkit-animation: squeez 2s 1s 1 forwards;
    -moz-animation: squeez 2s 1s 1 forwards;
    -o-animation: squeez 2s 1s 1 forwards;
    -webkit-animation: fadeOut 10s 10s 1 forwards;
    -moz-animation: fadeOut 10s 10s 1 forwards;
    -o-animation: fadeOut 10s 10s 1 forwards;
}

It does not work how I want it to. The code is disregarding the first animation "squeez" and only doing the animation "fadeOut" which messes everything up. Any ideas on how to make this work?



Solution :

You can comma-separate your animations, so you could do:

-webkit-animation: squeez 2s 1s 1 forwards, fadeOut 10s 10s 1 forwards;
-moz-animation: squeez 2s 1s 1 forwards, fadeOut 10s 10s 1 forwards;
-o-animation: squeez 2s 1s 1 forwards, fadeOut 10s 10s 1 forwards;
animation: squeez 2s 1s 1 forwards, fadeOut 10s 10s 1 forwards;

div {
  -webkit-animation: squeez 2s 1s forwards, fadeOut 10s 5s forwards;
  animation: squeez 2s 1s forwards, fadeOut 10s 5s forwards;
  height: 100px;
  width: 100px;
  background: #F00;
}
@-webkit-keyframes squeez {
  from {
    width: 100px;
  }
  to {
    width: 20px;
  }
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}
@keyframes squeez {
  from {
    width: 100px;
  }
  to {
    width: 20px;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}
<div>
</div>


    CSS Howto..

    How to make the click logo appear without a href in css/html?

    How to make the side bar active?

    how can i change the css style on click with table

    How to locate the element within CSS using javascript

    How can I increase the size of a gomap popup window?

    How do I make two arrows in css

    How to redefine a CSS class for the whole document?

    How to end line with a using css

    How to set CSS width so that the element will have the exact window width?

    Should I teach CSS layout directly to new learners or should I first teach how to make layout with tables, then table-less layouts?

    How to add a CSS class depending on URL path?

    How to rotate an image on click and then rotate it back after another click? Using HTML, CSS and jQuery

    How do you apply diferent colors from diferent css rules to the same object?

    How to display print preview as same as the webpage using css?

    CSS: How to attach an arrow to a div and make it overlap the border

    How to remove
      unordered list's last
    • list item's border using css without changing anything in HTML code?

    How to prevent the background image from getting blurry

    how to create a css attribute swapper between two elements?

    how to do display none using css

    CSS - How it works

    How to import the css file by media queries by condition [duplicate]

    How to set different css attributes with JQuery?

    How to use the Xpath and CSS selector in for function

    how can I overcome existing css and change button style to the default windows style button?

    How to center items inside isotope container?

    How to style a custom TreeCell with CSS in ScalaFX?

    How to place divs three in a row with css and html

    how to make dynamically loaded image with different width and height responsive in css

    How animate stacking divs in javascript/css?

    How to dynamically allocate block of text using css?