I'm looking for a way to animate a plane flying from off-page onto the page. At the moment, I'm using the code below, which is very clunky and not smooth. Do you know a better way to do this using CSS and HTML? If not, using another method?
.plane-animation{
animation: animationFrames linear 3s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames linear 3s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-moz-animation: animationFrames linear 3s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-o-animation: animationFrames linear 3s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-ms-animation: animationFrames linear 2s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
}
#keyframes animationFrames{
0% {
transform: translate(100%,-20px) rotate(0deg) ;
}
10% {
transform: translate(90%,-30px) rotate(5deg) ;
}
20% {
transform: translate(80%,-40px) rotate(15deg) ;
}
30% {
transform: translate(70%,-50px) rotate(10deg) ;
}
40% {
transform: translate(60%,-60px) rotate(5deg) ;
}
50% {
transform: translate(50%,-70px) rotate(0deg) ;
}
60% {
transform: translate(40%,-60px) rotate(-5deg) ;
}
70% {
transform: translate(30%,-50px) rotate(-10deg) ;
}
80% {
transform: translate(20%,-40px) rotate(-15deg) ;
}
90% {
transform: translate(10%,-30px) rotate(-10deg) ;
}
100% {
transform: translate(0%,0px) rotate(0deg) ;
}
}
<img class="plane-animation" src="http://www.jetcharterrewards.com/images/Plane%20Icons/plane-icon-4.png" alt="Paper Airplane" />
It seems like you're on the right track, and CSS animations should be perfect for the task you're solving. A few quick pointers:
You've made prefixed animation calls like -webkit-, -moz-, -o- and -ms-. However, you've not made any prefixed keyframes. This makes the first part wasted. If you want full browser compatibility you also need prefixed keyframes and prefixed transforms.
Like this:
#keyframes animationFrames{
0% {
transform: translate(100%,-20px) rotate(0deg) ;
}
100% {
transform: translate(100%,-20px) rotate(0deg) ;
}
}
#-webkit-keyframes animationFrames{
0% {
-webkit-transform: translate(100%,-20px) rotate(0deg) ;
}
100% {
-webkit-transform: translate(100%,-20px) rotate(0deg) ;
}
}
....
and so on.
The other part is more esthetic, but I suggest trying to work on one property at a time. Try drawing your animation in lines on a piece of paper first, figure out the axis and vectors that it's moving on and code one at a time. I'm afraid no-one on here can give you a finished piece of code, but with enough practice, I'm sure you will get the hang of animating.
Related
Struggling to even get started figuring this out, I am working on a website for a friend, here is a one of the pages..
http://sarahboulton.co.uk/livingroom.html
So on refresh it brings up one of four constellations of letters, which shift their constellations using math random.
We were hoping to start applying small animations to the letters.. something along these lines..
.lipbalm {
animation: shake 0.1s;
animation-iteration-count: infinite; }
#keyframes shake {
0% { transform: translate(0px) }
50% { transform: translate(0.5px) }
100% { transform: translate(0px) }
}
But whether these movements could be randomised for each letter, still small movements.. but using something similar to..
$(document).ready(function(){
$('.goldrocks-g').css({'left' : (Math.random() * 250) + 350})
});
..each letter randomises its movement, maybe one ends up on..
#keyframes shake {
0% { transform: translate(0px) }
50% { transform: translate(0.4px) }
100% { transform: translate(0px) }
}
.. and another has..
#keyframes shake {
0% { transform: translate(0px) }
50% { transform: translate(0.1px) }
100% { transform: translate(0px) }
}
and something similar for the speed too? All the letters have their own div, might be easier to view the source of the page to see whats going on !
The way I would approach this problem is by creating the a few variations of your shake class and then assign those classes at random when you are assigning the random constellation.
So something like this:
css
.shake-1{
animation: shake-1 0.3s;
animation-iteration-count: infinite;
}
.shake-2{
animation: shake-2 0.3s;
animation-iteration-count: infinite;
}
.shake-3{
animation: shake-3 0.3s;
animation-iteration-count: infinite;
}
#keyframes shake-1 {
0% { transform: translate(0px) }
50% { transform: translate(2px) }
100% { transform: translate(0px) }
}
#keyframes shake-2 {
0% { transform: translate(0px) }
50% { transform: translate(-2px) }
100% { transform: translate(0px) }
}
#keyframes shake-3 {
0% { transform: translate(0px) }
50% { transform: translate(0px, 2px) }
100% { transform: translate(0px) }
}
html
<div class="dyinglight-d shake-1" style="left: 839.646px; top: 212.011px;">...</div>
<div class="dyinglight-y shake-2" style="left: 959.592px; top: 97.9469px;">...</div>
etc
Here's a codepen I made for you with your site's code to show an example of it working: https://codepen.io/ChrisRArendt/pen/jQXjNa
You may generate CSS style using javaScript to integrate javaScript Math.random() into CSS logic.
For example you can generate 10 keyframes with names shake1 to shake10 with random transform on 50% and append this styles to the header style :
var css;
for (x=1;x=10;x++){
css += '#keyframes shake'+ x.toString() +' {';
css += '0% { transform: translate(0px)}';
css += '50% { transform: translate('+ Math.random() +'px)}';
css += '100% { transform: translate(0px)}';
css += '}';
}
$( "<style>" + css + </style>").appendTo( "head" );
Finally you can assign each keyframe randomly to target divs:
$('.goldrocks-g').each(function(){
(this).css({"animation": "shake" + Math.random()*10+1 +" 0.1s infinite");
})
I think the easiest way to do this would be to have a random feeling shake animation that could be applied to all letters. Then you can randomly apply inline CSS of animation-delay: 100ms or animation-delay: 300ms. That style could be applied differently each time. All letters will be using the same shake animation but will be at different intervals in the animation based on their delay time.
How can I trigger CSS class to start my logo animation when scrolling/changing slide with fullpage.js?
I have this (it works alright) for animating my SVG wheel logo:
.logo-img:hover #wheel {
-webkit-animation: in 1s;
transform-origin: 49% 50%;
}
#wheel {
-webkit-animation: out 1s;
transform-origin: 49% 50%;
}
#-webkit-keyframes in {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg);}
}
#-webkit-keyframes out {
0% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(0deg); }
}
It's a simple animation of spinning wheel 360deg., now I want it to spin when scrolling and use "in/out" keyframes depending on sliding page up or down.
I'm using fullpage.js and jquery v2.2.4
I hope It makes sense.
Thanks
Use the fullpage.js state classes.
So you can do:
.fp-viewing-section1-slide1 .myItem{
/*Whatever */
}
See my video tutorial here:
https://www.youtube.com/watch?v=qiCVPpI9l3M&t=5s
I am trying to build a simple animation of a beaker tipping over. Everything is working great on desktop, but both iOS Safari and chrome, when the animation starts it jumps immediately to the last key frame (100%). So this tells me the animation is firing, but for some reason it just doesn't want to well... animate.
Here is my scss code. I have an auto-prefixer, I've checked and double checked, it doesn't seem to be anything to do with -webkit. Any help would be awesome!!
/** Our Process Area Edits **/
&.our-process-title {
#our-process-svg {
width: rem-calc(150);
height: rem-calc(150);
margin: 50px auto;
transform: translateZ(0);
animation-name: beakerShake;
animation-duration: 4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-play-state: paused;
&.running {
animation-play-state: running;
}
#-webkit-keyframes beakerShake {
0% { -webkit-transform: rotateZ(0deg);}
5% { -webkit-transform: rotateZ(20deg); }
15% { -webkit-transform: rotateZ(-25deg); }
20% { -webkit-transform: rotateZ(0deg);}
40% { -webkit-transform: rotateZ(0deg);}
50% { -webkit-transform: rotateZ(5deg); }
55% { -webkit-transform: rotateZ(-10deg); }
58% { -webkit-transform: rotateZ(15deg); }
60% { -webkit-transform: rotateZ(0deg);}
65% { -webkit-transform: rotateZ(0deg);}
72% { -webkit-transform: rotateZ(30deg); }
78% { -webkit-transform: rotateZ(-35deg); }
85% { -webkit-transform: rotateZ(0deg);}
95% { -webkit-transform: rotateZ(0deg);}
100% { -webkit-transform: rotateZ(105deg);}
}
#keyframes beakerShake {
0% { transform: rotateZ(0deg);}
5% { transform: rotateZ(20deg); }
15% { transform: rotateZ(-25deg); }
20% { transform: rotateZ(0deg);}
40% { transform: rotateZ(0deg);}
50% { transform: rotateZ(5deg); }
55% { transform: rotateZ(-10deg); }
58% { transform: rotateZ(15deg); }
60% { transform: rotateZ(0deg);}
65% { transform: rotateZ(0deg);}
72% { transform: rotateZ(30deg); }
78% { transform: rotateZ(-35deg); }
85% { transform: rotateZ(0deg);}
95% { transform: rotateZ(0deg);}
100% { transform: rotateZ(105deg);}
}
EDIT:
After trying one last thing, of course I found the culprit. I am drawing this particular svg's path, and then when it's done drawing, changing the animation play state to running. Here is my js :
setTimeout(function(){
svg.style.animationPlayState = svg.style.WebkitAnimationPlayState = 'running';
}, 4500);
Once i removed that functionality it all worked fine. I really need this the animation to fire after the svg is drawn (for obvious reasons). Any help would be awesome.
Turns out this is an issue with how iOS and the mobile broswers handle the animation play state... Essentially they don't.
The solution was to add the class
.no-animation {
animation: none !important;
}
to the element, and remove that class with js when the time is right. Feels kind of like a hack, but its the only thing I could find to work on both mobile and desktop. If anyone has better suggestions, I'd love to hear them!
I have applied a transform: -webkit-transform: skewY(170deg) on an element.
Its working fine.
Afterwards, i add to the skewed element a class that animates a scaleOut.
This is the animation:
.partialScaleOutAnimation{
-webkit-animation: partialScaleOut 0.5s;
}
#-webkit-keyframes partialScaleOut {
0%{
-webkit-transform: scale(1);
}
100%{
-webkit-transform: scale(0.3);
}
}
for some reason when applying the animation, the skewed effect disappears. Why?
I'm attempting to create a pulsing animation of an element using CSS3's transform: scale(x,y). I want the object to endlessly pulse (becoming slightly larger) unless it's hovered over - at which point the current animation should finish (i.e. return to its original size) and cease pulsing until it's no longer being hovered over. I can't even seem to get jQuery's .animate() to work, however.
function pulse() {
$('#pulsate').animate({
transition: 'all 1s ease-in-out',
transform: 'scale(1.05,1.05)'
}, 1500, function() {
$('#pulsate').animate({
transition: 'all 1s ease-in-out',
transform: 'scale(1,1)'
}, 1500, function() {
pulse();
});
});
}
pulse();
Would using .addClass and .removeClass be better here? .removeClass would do the trick for stopping the animation on .hover(), but I'm unsure on implementation overall.
Try using CSS animations.
#keyframes pulse {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.1, 1.1);
}
100% {
transform: scale(1, 1);
}
}
#test {
animation: pulse 1s linear infinite;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1, 1);
}
50% {
-webkit-transform: scale(1.1, 1.1);
}
100% {
-webkit-transform: scale(1, 1);
};
}
#keyframes pulse {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.1, 1.1);
}
100% {
transform: scale(1, 1);
};
}
#test {
background: red;
width: 20px;
height: 20px;
-webkit-animation: pulse 1s linear infinite;
animation: pulse 1s linear infinite;
}
#test:hover {
-webkit-animation: none;
animation:none;
}
<div id="test"></div>
http://jsfiddle.net/rooseve/g4zC7/2/