Maintaining continuity of animation - html

I am trying to create an animation using css the idea is that when hovered the missile falls down(check fiddle link at bottom) rotating so that it will stay almost perpendicular
the problem is that there is no continuity in the animation there are a few pauses i think my problem is here
.boy:hover~ .missile{
-webkit-animation:anim2 10s;
}
#-webkit-keyframes anim2{
0%{margin-left:280px;}
50%{margin-left:100px;}
60%{margin-top:90px;transform:rotate(200deg);}
85%{margin-left:80px; }
100%{margin-left:70px; margin-top:200px; transform:rotate(90deg);}
}
http://jsfiddle.net/tuuqhgk3/2/

.boy:hover~ .missile{
-webkit-animation:anim2 10s;
-webkit-animation-timing-function: linear;
}
This should give you a continuous animation speed, rather than the easing (pauses) that is set by default.
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

Try updating your anim2 to this:
#-webkit-keyframes anim2 {
0% {margin-left: 280px; transform: rotate(220deg);}
15% {margin-top: 80px;}
100% {margin-left: 100px; margin-top: 200px; transform: rotate(130deg);}
}
To get smooth animation, you need to calculate exact distances (margin-top, margin-left) that need to change in each % step. I don't think you need to add too many steps in this case.
Also, if you want to repeat animation, you can add "-webkit-animation-iteration-count: infinite;" to your hover .fire/.missile (fire won't disappear, for example).

Related

CSS Animation Spin - Not Spinning in Place Anymore

I have an image then I have applied the following style rules to:
.spinner {
position: absolute;
width: 600px;
height: 600px;
-webkit-transform-origin: 50% 50%;
-webkit-animation:spin 14s linear infinite;
animation:spin 14s linear infinite;
}
#-webkit-keyframes spin { 100% {-webkit-transform: rotate(-360deg);} }
#keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg);}}
In my IDE, this works perfectly fine. I then published a page to the web about 6 months ago. I loaded the page, and it worked as expected. Actually things were good, no problems or anything for all those 6 months. Then a few weeks ago I noticed a strange development -- the rotation behavior changed. I was bewildered because this page, and indeed, the entire site is static. There have been no updates to the master css file or anything for that matter that could possibly interfere with the style rules that I posted above.
Specifically what changed was instead of the image rotating in place at its center, the image now rotates about its original center position. The easiest way to imagine the change in behavior is comparing it to a clock. The center of the clock doesn't move as the hands rotate. However the minute hand and hour hands do (namely the ends of the hands that point to the time). That is what my image is doing now. It's now moving across the x and y dimensions in pixel space when it is not supposed to. It's supposed to rotate in place, staying still. There should be no movement in x or y.
I said to myself, "well this is just impossible," and thought the problem would go away by itself just as mysteriously as it came. Unfortunately it persisted for a few weeks, so I feel compelled to deal with it. Despite the absence of style rule clashes, I added !important to all the style rules that I posted above for the .spinner class as well as the #keyframes out of scope as well. This didn't help.
Now I'm starting to think it could be a browser issue? I'm using google chrome; only google chrome, I didn't include any -moz, I won't need to. My only guess is that the browser updated itself and started handling these animations differently?
Question: Why would animation:spin change spinning behavior? Is this symptomatic of some other looming issue? Is there anything I can do to make my rules more robust, other than add !important?
Chrome version: 64.0.3282.186
Update After what seemed like a billion trial and errors, I found that by setting:
.spinner {
-webkit-transform-origin: 15% 0%;
}
The image started to spin in place like it used to. Still begs the question what happened...
I examined the image to see if it's dimensions had changed somehow, but things look normal.
A bit late at 2021.5 But may be helpful for somebody. In my case it was because I removed :
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
and then caught that. All the followings were untouched ,the css were:
#overlay {
display: none;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
position: absolute;
z-index: 99999;
}
.myblock {
display: inline-block;
vertical-align: center;
horiz-align: center;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
transform-origin: center center;
-moz-transform-origin: center;
width: auto;
height: auto;
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
html:
<body>
<div id="overlay">
<div class="myblock" style="background-color: transparent; background-blend-mode: unset">
<img src="/images/corona.png" width="150px" height="150px" style="background-blend-mode: unset"
alt="this slowpoke moves"/>
</div>
</div>
....//other divs
</div>
</body>
the js part:
function spinIt(gironPrm) {
if (gironPrm === true)
$("#overlay").css('display', 'flex')
else
$("#overlay").css('display', 'none')
}
I have no idea no care of its science and no time to figure out why it happened to me,
but its so as it is

CSS animation Ends Wrong [duplicate]

I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen.
However, it always goes back to its original state once it has played. Anyone know how I can stop it on its last css frame (100%), or else how to get rid of the whole div it is in once it has played.
#keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
You're looking for:
animation-fill-mode: forwards;
More info on MDN and browser support list on canIuse.
If you want to add this behaviour to a shorthand animation property definition, the order of sub-properties is as follows
animation-name - default none
animation-duration - default 0s
animation-timing-function - default ease
animation-delay - default 0s
animation-iteration-count - default 1
animation-direction - default normal
animation-fill-mode - you need to set this to forwards
animation-play-state - default running
Therefore in the most common case, the result will be something like this
animation: colorchange 1s ease 0s 1 normal forwards;
See the MDN documentation here
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
Browser Support
Chrome 43.0 (4.0 -webkit-)
IE 10.0
Mozilla 16.0 ( 5.0 -moz-)
Shafari 4.0 -webkit-
Opera 15.0 -webkit- (12.112.0 -o-)
Usage:-
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
The best way seems to put the final state at the main part of css. Like here, i put width to 220px, so that it finally becomes 220px. But starting to 0px;
div.menu-item1 {
font-size: 20px;
border: 2px solid #fff;
width: 220px;
animation: slide 1s;
-webkit-animation: slide 1s; /* Safari and Chrome */
}
#-webkit-keyframes slide { /* Safari and Chrome */
from {width:0px;}
to {width:220px;}
}
Isn't your issue that you're setting the webkitAnimationName back to nothing so that's resetting the CSS for your object back to it's default state. Won't it stay where it ended up if you just remove the setTimeout function that's resetting the state?
I just posted a similar answer, and you probably want to have a look at:
http://www.w3.org/TR/css3-animations/#animation-events-
You can find out aspects of an animation, such as start and stop, and then, once say the 'stop' event has fired you can do whatever you want to the dom. I tried this out some time ago, and it can work, but I'd guess you're going to be restricted to webkit for the time being (but you've probably accepted that already). Btw, since I've posted the same link for 2 answers, I'd offer this general advice: check out the W3C - they pretty much write the rules and describe the standards. Also, the webkit development pages are pretty key.
Nobody actualy brought it so, the way it was made to work is animation-play-state set to paused.
I learned today that there is a limit you want to use for the fill-mode. This is from an Apple dev. Rumor is * around * six, but not certain.
Alternatively, you can set the initial state of your class to how you want the animation to end, then * initialize * it at from / 0% .

Can I make transitions within a CSS animation quicker?

So my goal is to have a pure CSS background image that just fades in and out of different images.. it works and is great, I'm just wondering if there is anyway to make the transitions quicker so I don't have to see both images eased together.. I know there are different ways of controlling how that transition happens using the timing function - I'm just wondering if there is any other way? I tried using different keyframe stop points to call the next image followed by the same image 2% later to in my mind, complete the transition quicker but it didn't seem to work.. any ideas?
http://jsfiddle.net/FE948/
<div></div>
body {
background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/02/headerbg.jpg') !important;}
#-webkit-keyframes slider {
25% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/02/headerbg.jpg');}
48% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg2.jpg');}
50% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg2.jpg');}
73% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg3.jpg');}
75% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg3.jpg');}
97% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/02/headerbg.jpg');}
99% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/02/headerbg.jpg');}
}
body {
-webkit-animation-direction: normal;
-webkit-animation-duration: 27s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: slider;
-webkit-animation-timing-function: ease;
}
Thanks in advance!
Use the following keyframe percentages.
#-webkit-keyframes slider {
32% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/02/headerbg.jpg');}
34% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg2.jpg');}
65% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg2.jpg');}
67% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg3.jpg');}
98% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg3.jpg');}
100% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/02/headerbg.jpg');}
}
These should allow for quicker transitions.

Rotating a banner on hover causes it to spasm

I have an image on my website. When I hover over it I want it to do a 360 spin animation.
I'm currently doing so in CSS:-
.img-responsive:hover {
transition-duration: 2s;
transform:rotate(360deg);
}
However, when the user hovers at the edge of the image, the image rotates and is no longer being hovered over at the edge causing the image to "spasm".
How can I achieve a proper looking and stable rotation? JavaScript would work too.
You can fix it by adding small delay to your transition
Working Demo
.img-responsive:hover {
transition-duration: 2s;
transform:rotate(360deg);
transition-delay: 0.5s;
}
Update:
If you can use animation, You can do this
Updated Demo
.img-responsive {
animation: rotateme;
}
.img-responsive:hover {
animation: rotateme 5s;
}
You can make the image bigger when hovered, so that it's difficult that the user accidentally unhovers
if there is no padding or margin, set
.img-responsive:hover {
transition-duration: 2s;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
padding: 50px;
margin: -50px;
}
Increasing the padding to 50px makes sure that the mouse is still on it. Changing the margin in the same amount, but in opposite sense makes it stay at the same location.
fiddle

Pop up book effect with CSS animations

So I want to make a pop-up book effect but in 2D only. (so NOT like the beercamp page).
Ideal results:
bottom of img stays in the same position
img starts invisible then is popped up (imagine it lying on its back, then being lifted up till it is vertical)
Item should not appear too (if possible) compressed
I've read into CSS animations, the closest animation I can find is
transform: rotateX(xdeg);
So I produced this to test it out:
<!doctype html>
<style type="text/css">
#popup
{
transform: rotateX(90deg);
animation-delay: 2s;
animation-duration: 3s;
animation-name: popupanim;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes popupanim
{
from {
transform: rotateX(90deg);
}
to {
transform: rotateX(0deg);
}
}
</style>
<body>
<img id="popup" src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width=379px height=400px/>
</body>
The problem with this is that the bottom level of the image changes, and that the image is obviously compressed.
How could I improve this to meet my needs?
(also as a side not rotate3d(xdeg, ydeg, zdeg) does not produce any output, why?)
Add a container element and use the transform-origin property to make it pivot properly:
#container {
display: inline-block;
perspective: 600px; /* Tweak this */
}
#popup {
transform: rotateX(90deg);
transform-origin: bottom;
}
Demo: http://jsfiddle.net/BEy9f/3/
You need to use a parent element (#container) to make the perspective work properly. Also, if the #popup isn't in the exact center of the element (which is why I put display: inline-block in there), it'll appear off-center in the animation.
Chrome supports 3D transformations as well, so you can add support by using the -webkit- prefix.