How to use more times css transform property?


Tags: javascript,jquery,html,css

Problem :

Basically I want that an image change its position sometimes so I use this code:

JQUERY:

$(block).delay(2200).css({                
                transform: 'matrix(0.586,0.8,-0.8,0.586,40,40)'
            }).css({
                "transition-duration": "5s"
            }).delay(2200).css({                
                transform: 'matrix(0.866,0.5,-0.6,0.866,0,0)'
            }).css({
                "transition-duration": "5s"
            });

but after the first transform nothing changes.

How can I use more times this css property? There is a better way to do the same effect?



Solution :

Why not use a CSS animation, instead of JS? It'll run faster, and work for people who have JS disabled:

.block {
 @animation: myAnimation, 14400ms, forwards, linear;
}

@keyframes myAnimation {
  15.3% { transform: none; }
  50%   { transform: matrix(0.586,0.8,-0.8,0.586,40,40); }
  65.3% { transform: matrix(0.586,0.8,-0.8,0.586,40,40); }
  100%  { transform: matrix(0.866,0.5,-0.6,0.866,0,0); }
}
  • Nothing happens for the first 15.3% of time (2200/14400).
  • Over the next 5000ms (until the 50% mark), the first transformation unfolds.
  • Nothing happens for the next 15.3% of the time.
  • Over the next 5000ms (until 50%), the second transformation unfolds.

There's a great tutorial at MDN Using CSS Animations


    CSS Howto..

    How to make hidden div slide down without affecting other elements in same row

    How to place buttons next to each other using css Bootstrap

    How to apply custom size to text field in rails

    How to create a progress dialog when switching the webpages?

    how to make 2 fixed-width sidebar div and 1 flexible-width main div?

    How to remove/close bootstrap css notification? [closed]

    how to break unordered list of links with image or color with css

    CSS: How to set several div's in one line with 100% width?

    How can I get these two widgets to align horizontally using CSS selectors?

    How to make an object go to a higher layer

    How to not apply a webpage's CSS on the div I am inserting into it via content scripts?

    How to add left border with image(s) dynamically

    How can I :hover over different links in one line while getting the spacing correct?

    HTML/CSS - How to set text (e.g. 'Quote of the Day') to change automatically on page load/reload?

    How do I center a button in html5?

    How to add tooltip to image on hover with CSS

    How do let CSS change the inset shadow on li hover, instead of resetting it?

    How can i repeat the image rollover and have multiple aligned underneath on my website?

    How to align multiple images in a table cell vertically?

    CSS How to attach input box to bottom of divider window

    How to set a:visited and a:hover programmatically in ASP.NET

    how to make menu on mouse hover in CSS

    how to remove resize in text area tag

    How do you set the background color for a variable height page?

    how to make CSS animation to play every 10 seconds

    Ruby on rails dropdown