Geek asks and answers

Web Whale Chain Animation

I would like to create an animation with a “chain” that moves the div element on the screen to two different points on the screen using two consecutive steps.

So, if my div starts with (0,0), I would like this div to come to life and move in the (100,100) direction after 2 seconds. After he reaches the last destination, he will come to life again and move to the point (200, 200) in 3 seconds.

Using -webkit-animation I can do one translation or animation, but I can’t link the second animation that starts after the first one ends, because I don’t have a handle (event or css class) that can give me such information.

I am happy to use some javascript magic as part of the solution.

Here is some code to visualize what I'm trying to do:

HTML:

<div id="box"></div>

CSS

body {
    position: relative;
}

#box {
    width: 64px;
    height: 64px;
    position: absolute;
    text-indent: -9999px;
}

.translate1 {
    -webkit-transform: translate(100px, 100px);
    -webkit-transition: all 2s ease-in;
}

.translate2 {
    -webkit-transform: translate(100px, 100px);
    -webkit-transition: all 23 ease-in;
}

Javascript

$('#box').click(function(){ $(this).addClass('translate1') });

Edit: I get a solution that uses -webkit-animation, because currently it is the best way to display smooth native animation in osx

+3
source share
4 answers

I use jQuery and Modernizr, then a function like this:

speed = 500;

var vP = "";
var transitionEnd = "transitionEnd";
if ($.browser.webkit) {
    vP = "-webkit-";
    transitionEnd = "webkitTransitionEnd";
} else if ($.browser.msie) {
    vP = "-ms-";
    transitionEnd = "msTransitionEnd";  
} else if ($.browser.mozilla) {
    vP = "-moz-";
    transitionEnd = "transitionend";
} else if ($.browser.opera) {
    vP = "-o-";
    transitionEnd = "oTransitionEnd";
}   

function animate(object, cssProperties, callback, ms) {
    if (!ms) {
        ms = speed;
    }

    if (Modernizr.csstransitions) {
        object.css(vP+"transition", "all "+ms+"ms ease-in-out");

        object.css(cssProperties);

        if ($.isFunction(callback)) {

            object.bind(transitionEnd,function(){
                object.unbind(transitionEnd);
                callback();
            });

        }

    } else {
        if ($.isFunction(callback)) {       
            object.animate(cssProperties, ms, callback);
        } else {
            object.animate(cssProperties, ms);          
        }
    }
}

Then name it like this: animate($("#someID"),{"left":"100px"});

See http://css3.bradshawenterprises.com/legacy/ for more details.

+3
source

The easiest way to achieve this would be ...

$('#box').click(function(){ 
  $(this).addClass('translate1').bind("webkitTransitionEnd", function() {
      $(this).addClass('translate2')
    })
});

http://jsfiddle.net/ALhym/

, , , translate2 , translate1, -webkit-transition: 23 ; , .

+3

Using jquery ( animate ) you can:

function moveTo100(){
  $('#box').animate({
    left: '+=100',
    top: '+=100'
  }, {
    duration: 2000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: moveTo200
  });
}

function moveTo200(){
  $('#box').animate({
    left: '+=100',
    top: '+=100'
  }, {
    duration: 3000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    }
  });
}

You can add another effect and type of attenuation.

0
source

To do this, you need keyframes of the animation. The following is an example of using the hover pseudo-class.

@-webkit-keyframes Move{
    0% {
        -webkit-transform: translate(0px,0px);
    }
    40% {
        -webkit-transform: translate(100px,100px);
    }     
    100%{
        -webkit-transform: translate(200px,200px);
    }
}

div:hover {
    -webkit-animation-name: Move;
    -webkit-animation-duration: 5s;
    -webkit-animation-fillmode: forward;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

And if you're interested in a longer tutorial on CSS animation, here you really are introducing a complete tutorial on CSS animation

0
source

More articles:


All Articles