I used CSS transition for create the Fade Up animation effect. Here is the code:
.animation-up{
opacity: 0;
-webkit-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
-webkit-transition: -webkit-transform .6s ease;
transition: -webkit-transform .6s ease;
-o-transition: transform .6s ease;
transition: transform .6s ease;
transition: transform .6s ease,-webkit-transform .6s ease;
}
.animation-up.active {
opacity: 1;
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0);
}
For addding active to the block I used:
function animations() {
appear({
elements: function elements(){
return document.getElementsByClassName('appear');
},
appear: function appear(el){
var item = $(el);
item.addClass('active');
},
bounds: 0,
reappear: true
});
}
And this animation works well on Firefox, Opera, and of course Chrome. But there is some issue on iPhone. Here is example: https://gyazo.com/1bd0bdb42fd7d043b404cd868b35e90b as you can see the block Fade Up but after disappears and reappears. Maybe the JavaScript cause the issue?
There are multiple transition css properties and the last one will overwrite thr previouse ones. You can comma seperate the transition targets like this:
transition: width 2s, height 4s;
So in your example it would be
-webkit-transition: opacity 1s ease, transform .6s ease;
-o-transition: opacity 1s ease, transform .6s ease;
transition: opacity 1s ease, transform .6s ease;