Add CSS3 transitions to jQuery Animate script

Question

Below I have a script that loads images in a random order and flies them onto the screen beside each other. You can find the script here:

https://jsfiddle.net/38e126f4/

I would now like to be able to add different random CSS3 transition effects to each image as they fly onto the screen. I tried using the step function to no avail.

step: function(now, fx) {
    var num = Math.floor((Math.random() * 2) + 1);
    switch(num) {
        case(1):
            $(".av_icon_"+index).css("opacity", "0.5");
            break;
        case(2):
            $(".av_icon_"+index).css('-webkit-transform','rotate(0deg) scale(1) skew('+now+'deg) translate(0px)');
            break;
        } 
},

When I add this function, it nulls all animations and makes all images transparent with a crazy css transform effect.

What is the best way to add neat transitions to these images?

$(".av_icon_"+index).css("opacity", "0.5"); is seting transparency to half, it is not an animation.. This is why you see them transparent — pablito.aven
– pablito.aven, Commented Jun 22, 2015 at 18:29
Yes, that was my attempt at getting something to happen. But it makes all images transparent, not just if num = 1. How would I add an animation in there? — steeped
– steeped, Commented Jun 22, 2015 at 18:32

Robert McKee · Accepted Answer · 2015-06-22 21:52:08Z

2

You mean do the entire animation in css3?

var av_icons = ["http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png",
  "http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico",
  "http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png",
  "http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png",
  "http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png",
  "http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico",
  "http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png",
  "http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico",
  "http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png",
  "http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png"
];

function shuffle(array) {
  var currentIndex = array.length,
    temporaryValue, randomIndex;
  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}
shuffle(av_icons);
$.each(av_icons, function(index, value) {
  $(".icon-slider").append("<img src='" + value + "' />");
});

.icon-slider img {
  position: relative;
  animation: load 1s normal forwards ease-in-out;
  top: -1000px;
  left: -500px;
  width: 90px;
  height: 90px;
}
.icon-slider img:nth-child(1) {
  animation-delay: 0s;
}
.icon-slider img:nth-child(2) {
  animation-delay: 0.5s;
}
.icon-slider img:nth-child(3) {
  animation-delay: 1s;
}
.icon-slider img:nth-child(4) {
  animation-delay: 1.5s;
}
.icon-slider img:nth-child(5) {
  animation-delay: 2s;
}
.icon-slider img:nth-child(6) {
  animation-delay: 2.5s;
}
.icon-slider img:nth-child(7) {
  animation-delay: 3s;
}
.icon-slider img:nth-child(8) {
  animation-delay: 3.5s;
}
.icon-slider img:nth-child(9) {
  animation-delay: 4s;
}
.icon-slider img:nth-child(10) {
  animation-delay: 4.5s;
}
@keyframes load {
  80% {
    opacity:0.5;
    transform: scale(0.5);
  }
  90% {
    top: 0;
    left:0;
    transform: rotate(0deg) scale(.8);
    opacity:1;
  }
  100% {
    top: 0;
    left: 0;
    transform: rotate(360deg) scale(1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-content icon-slider"></div>

edited Jun 22, 2015 at 21:52

answered Jun 22, 2015 at 21:41

Robert McKee

21.5k1 gold badge48 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

steeped Over a year ago

Thank you @Robert McKee , how would I add a transition like: -webkit-transform: rotate(0deg) scale(1) skew('+now+'deg) translate(0px);?

Duncan Thacker Over a year ago

This isn't really how it works. CSS transitions (and jQuery animate() calls) define a start and end point (e.g. "rotate 0deg" to "rotate 359deg" and then automatically animates between them. Your code example is about parameterised animations. You can do it that way, but you'll get much smoother and better results using the method @Robert describes.

Duncan Thacker Over a year ago

You should be able to add a skew term to the @keyframes directive in the code above to achieve the effect you want.

Robert McKee Over a year ago

@DuncanThacker is correct. You just need to add the skew into the load keyframe animation. Change: transform: rotate(0deg) scale(.8); to transform: rotate(0deg) scale(.8) skew(15deg); and change transform: rotate(360deg) scale(1); to transform: rotate(360deg) scale(1) skew(0deg);. Also please run the CSS through an autoprefixer as well so it targets a wider audience. Like this one: autoprefixer.github.io

Collectives™ on Stack Overflow

Add CSS3 transitions to jQuery Animate script

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related