Ok so I've got a project where I am making a cartoon version of a record player. I want the play button on the side to toggle the animation of the record spinning using webkit, while at the same time starting the audio track. The audio track is fine but now sure about affecting the webkit from the button. What's the best way to do this? I'd rather avoid JQuery.
Any nod in the right direction would be great.
You can achieve what you want with CSS transforms and CSS animations. The following demo shows how to do the spin:
http://jsfiddle.net/FSkKn/
div {
/* add -webkit, moz, and o prefixes to the property below */
/* change 2s to the time you want for one revolution */
animation: spin 2s linear infinite;
}
#keyframes spin {
/* both the keyframe above and the transform properties below need prefixes */
from {
transform:rotate(0deg) ;
}
to {
transform:rotate(360deg);
}
}
Now you have something spinning, you just need to trigger it. The best way would be to add a class to the div (or element you are using) when the button is clicked. Then add the animation property to a selector with that class, such as:
.spin-baby-spin {
animation: spin 2s linear infinite;
}
Related
I have a CSS keyframes animation that I'm using like so:
.content[docked=true] {
animation: dockContent ease var(--dock-animation-time);
animation-direction: normal;
animation-fill-mode: forwards;
}
.content[docked=false] {
animation: dockContent ease var(--dock-animation-time);
animation-direction: reverse;
animation-fill-mode: backwards;
}
When the docked attribute is set to true, it animates as expected. Afterwards, when the docked attribute is set to false, it doesn't animate and instead snaps to the initial values (0% -- it's running in backwards) as if there were no animation at all. The animation is still being run through though, because I am not setting the CSS rules back to their starting values anywhere except for the animation. After reverting the docked attribute to false, setting it to true again results in the same 'jump' with the expected end values but no transition or value interpolation. Why is this happening?
My animation is too elaborate to use transitions because it sets values in non-linear ways along its duration. That's exactly why I'd prefer not to have to make a second animation with all the values flipped.
I have a CSS-animated background position.
body {
background: linear-gradient(320deg, #000, #3ff);
background-size: 10000% !important;
animation: AnimationName 1s linear infinite;
}
#keyframes AnimationName {
0%{background-position:top left}
50%{background-position:bottom right}
100%{background-position:top left}
}
I have a range slider set up for the user to change the speed, by setting the animation-duration style property. The trouble is, the animation jerks to different parts of the animation as this property is changed. That is, if the animation-duration is 0.1s and it is changed to 5s over the course of a second or so, the background position is seemingly randomly popped around. You can see this for yourself in the fiddle:
https://jsfiddle.net/x97adpe6/2/
I suspect this is happening as the browser is using some sort of time-based calculation to determine where the animation should be for the given animation duration, rather than offsetting the time based on where it is. That is, if the animation duration is changed from a long time, to a short time, and back to a long time, the effect is as if the animation was never changed from the long time.
What I would like to happen is the natural result of changing the speed of something. I don't need any tweening between speeds, but I do want the animation to continue on at the new speed from wherever it is at this moment.
Is this possible, short of re-implementing the whole animation in JavaScript?
I'm using css steps to create a "light board" you could say.
So there's a column of 18 divs that act as a "bulb".
The animation moves a div behind it that acts as the "lit up bulb "
My keyframes are set as:
#keyframes strobe{
to{
transform:translateX(1800%);
}
}
And my animation is set as:
animation:strobe 2s steps(18, start) infinite;
Currently the animation never includes it's original position. (I also tried using 0% - 100% for the keyframes)
How can I include the initial position in the steps? And why is it currently not?
Included a fiddle for reference. Still working on responsive, so it doesn't show as 18 divs across.
https://jsfiddle.net/btxffgfj/
Playing around with your fiddle, I tried changing start to end and that seems to work.
animation:strobe 2s steps(18, end) infinite;
Fiddle
I have a div which is already rotated, however all content within it is transformed in the same fashion.
I have plugged a fiddle below to better illustrate what I am trying to achieve.
What would be the proper way to transform the image of the 'moon' so that it maintains it's original shape as it travels the path?
Simple: Make the moon rotate in the opposite direction!
http://jsfiddle.net/hsntY/3/
#moon { width:150px; animation:RotateRev 15s linear infinite;}
#keyframes RotateRev
{from {transform:rotate(360deg);}
to {transform:rotate(0deg);}}
(also, I can understand if it was just for example or something, but you should use the standard spec AND have prefix fallbacks)
The proper way to transform the image is applying the oposite transforms that you have applied to all the elements.
In your case, that includes the rotateX and rotateY in the path, and the rotate in the animation.
for this to work ok, you also need to specify -webkit-transform-style: preserve-3d; so that the transformations can really undo the previous transforms.
There is a problem, though, and I think this is a Chrome bug: when you apply a keyframes animation, preserve-3d stops working.
So, sorry to say, I am unable to make it work; and I think that it is not posible if this bug isn't corrected. May be in another browser ?
you can check the static correct fiddle correct fiddle without animation
You can see there also the inverse keyframes animation, that you would need to make it work.
I would suggest you to create the elipse scaling the circle in the plane, instead of rotating it in 3D, I believe you can make that work this way
The CSS end like that:
#Path{margin:5% 15% auto; position:relative;
height:500px;width:500px;
background-color:rgba(0,200,200, .1);
border:1px solid black;
border-radius:300px;
-webkit-transform:perspective(0px) rotateX(50deg) rotateY(25deg);
-webkit-transform-style: preserve-3d;}
#moonContain {width:500px;height:500px;position:absolute; margin-left:-0.5%;
-webkit-transform-style: preserve-3d;
}
#moon { width:150px;-webkit-transform-style: preserve-3d;
-webkit-transform:perspective(0px) rotateX(-50deg) rotateY(-25deg); }
#-webkit-keyframes Rotate
{from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}}
#-webkit-keyframes counterRotate
{from {-webkit-transform:rotate(360deg);}
to {-webkit-transform:rotate(0deg);}}
Correction
I wrongly interpret the problem that arises when you set the animation in the moon itself; and I thought it was a bug in Chrome. What it really was happening was that the animation was animating the transform property, and that undoes the transform property specified in the moon itself.
Correct answer:
set both transforms in the animation, even though the later is constant:
#-webkit-keyframes counterRotate
{from {-webkit-transform:rotate(360deg) rotateX(-50deg) rotateY(-25deg);}
to {-webkit-transform:rotate(0deg) rotateX(-50deg) rotateY(-25deg);}}
#moon { width:150px;-webkit-transform-style: preserve-3d;
-webkit-animation:counterRotate 15s linear infinite;}
Correct demo
I'm trying to get my head wrapped around CSS3 transitions, and I'm not sure if there is something wrong with my understanding, or if the browsers aren't cooperating.
First of all, I thought Opera was supposed to have support for transitions, since version 10 or so, but neither transition nor -o-transition seems to do anything in 11.62. Or does Opera use a different syntax?
Anyway, I can make a background color fade in and out on hovering with most other browsers by writing
div {transition:background 2s;}
div:hover {background:lime}
OK so far, and I can also make it so that the background fades in, but not out, by writing
div:hover {transition:background 2s; background:lime}
and that the background fades out, but not in, like so:
div {transition:background 2s;}
div:hover {transition:background 0s; background:lime}
But I don't understand why that happens. According to the docs, a transition with a 0s duration isn't supposed to have any effect, so why does the last one have a different result?
jsFiddle
I assume what you are looking for is the ease timing function.
So your CSS rule should look something like this.
.class {
transition: property(ies) duration timing-function;
}
.class:hover {
property(ies): new value;
}
For Opera you have to define the exact property. In your case it wouldn't be the background property but the background-color property.
From your example it looks like it's behaving as I'd expect it.
The transitions run from one state to another.
I'll try an explain this as best I can.
On the last one you have a trasition of 2s on the <div> in its normal state and a a transition of 0s on the <div> in it's hover state.
So what is happening?
When you hover on the <div>, the state changes to :hover and so the transition for div:hover is run. You have a trasition of 0s so no animation is run.
When you remove the mouse from the <div> the state changes from :hover back to normal, and so the transition for div in its normal state is run. You have this at 2s.
Does this explain what is happening and how the transitions work?