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 vertically align text over an image

    How to change the font size in table cells according to cells content?

    how to force page break between absolutely positioned elements in css

    How to disable scrollbars in Webmethods 8?

    How to change the color of the active link in the menu

    How can a site Use Javascript and NOT display any structural HTML in the browser?

    How to only select a displayed element using CSS

    How to change the css of a text input using jquery?

    How can I get horizontal overflows to work in CSS?

    How to create a progress bar

    How do I use a wildcard asterisk CSS selector in SASS? [closed]

    Possible to code a search box that searches for a specific tag in a div and then shows it / hides others? [closed]

    How to animate semicircle-like meter indicating elapsed time with HTML/CSS/JS?

    How know CSS version - ASP.NET - VS Community 2013

    How to set readonly property of textbox from css

    How to center my menu bar with css. (I am using Microsoft Expression Web 4)

    how to to set chat box based on user id using css

    CSS 'schema' how-to

    How to add and use jquery and css file in joomla module..?

    How to get rid of the spaces between CSS nav element borders?

    How to vertical center ordered list-navigation

    how the rises up and down button is made?

    How to position the scaled elements (jQuery, css)

    How to display only the
      that has a selected
    • in it, including all of the
    • s in that parent ul, not just the selected ones?

    How to reset jQuery toggled classes applied throughout the page? (AngularProject)

    How do I fix hover property of a div?

    PHP: How to add a CSS text-align property to an already present inline style attribute of an element using simple_html_dom parser?

    How to arrange three flex div side by side

    How to pre-complie css style sheets in rails 2.3?

    How to restrict Visual Studio 2012.2 from generating .css files in LESS editor?