I am trying to apply a Minecraft-like style to a div element. The end result should look something like the "if not ok then return end" message:
Quick sidenote: For those of you who haven't played the game, a random line from a specific file is read and it's contents are displayed as the message of the day. It throbs in and out and grabs your attention.
The text shadow, font, and throbbing animation has already been done. However, when I try to apply the second animation, it overrides the throbbing animation (meaning it does not throb, but is rotated)
My CSS is as follows:
#random-message {
/* font/text stuff */
animation:minecraft, minecraft-rotate 0.5s infinite;
-webkit-animation:minecraft 0.5s infinite; /* Safari and Chrome */
}
The animation minecraft applies a transform: scale effect, and minecraft-rotate applies a transform: rotate effect.
What would be the best way to implement a rotation effect without overriding my throbbing effect?
You don't want to have a rotation animation...you want to rotate the div. Simply add transform: rotate(340deg); line to the css block.
Any given element can have only one transform at any given time. Any attempt to set at the same time 2 transforms will result in one of them being overriden.
You can:
1) set two divs, one inside the other, and apply a different transform to the parent and to the child.
2) build the composite transform. In the case of an animation, that means creating composite transforms for each frame.
Related
I am trying to animate a list of html elements with following CSS property:
animation: slide-right 10s linear infinite 0s;
Animation is perfect for me but, when list finish I would like to have a loop behaviour instead of a jerky transition that restart the animation because of infinite property of animation.
I tried to workaround it appending items via jQuery but it doesn't work. It's possible to do a loop animation with css3?
I got inspiration from this codepen: https://codepen.io/goomy/pen/vXKGGz
Thanks in advance
UPDATE: My code here
By "loop" I am going to assume you mean you want the element to re-appear from the bottom of the screen once it has vanished off the top of the screen.
One way to achieve this could be to set overflow-y: hidden on your body element, and then define the animation keyframes in terms of viewport height units, vh. If you translate an element to appear at y = 110vh then (assuming the document doesn't overflow) you know that it must appear off-screen since the very bottom of the body element is at 100vh. Similarly, you can transition to something like -10vh at the top, assuming the element is less than 10vh tall.
I modified your CodePen to illustrate this idea:
https://codepen.io/anon/pen/pwBxPL
So given this bug it's not reliable to overwrite an css animation using !important.
However, I'm in the following situation:
Open/ closing a list should be done by animating (using a css animation with keyframes) height on each of the elements in the list.
an order-by dropdown allows the elements in the list to be reordered. This is implemented by doing a (jquery) detach on all elements followed by an (jquery) append in the correct order. I want the reorder to happen instantly, without animations.
However, because of the detach/reattach the css animation kicks in again. resulting in a (albeit nicely animated) list growing from 0 height again to full-height no with elements in the correct order.
How to make bullet 2. work? I can't use css-classes to overwrite the height property using !important, because of the bug mentioned above. It seems there's no way to overwrite the properties set by the animation.
As an alternative I tried to set a css-class just before reorder (and remove just after reorder) that would do animation: none. Although that makes sure no animation happens during reorder, when I remove said class (and thus removing animation: none) AFTER the reorder happened, the initial css-class which has animation: <the fade in anim> for some reason kicks in the animation again, although it was already run once*
Any way out of this catch-22?
*) yeah I'm setting the animation as follows animation: 0.2s ease 0s normal forwards 1 fadeinTdSpan;, so it really should only run once.
However, probably due to adding the node to another parent, the cycle of animation restarts.
I am using a slider plugin (http://roundsliderui.com/) and added additional elements to have a custom fill image. In Chrome, the transitions that happen when the slider is clicked are not synchronized even though the settings are the same. It only seems to happen in Chrome, and is worse on mobile. I am targeting Android with the Crosswalk webview, so it will affect all users, especially slower phones.
The plugin has one element that rotates the handle, and I add one child to clip the fill image (.rs-range-clip-custom, no transform) with a child that rotates back to vertical to hold the fill image as a background (.rs-range-custom). It is very noticeable for the actual images, since the fill will either leave a gap at the end or extend past the end of the track depending on the direction it is moving.
.rs-animation .rs-transition {/* plugin css */
transition: all .5s linear 0s;
}
.rs-animation .rs-range-custom {/* my css */
transition: transform 0.5s linear;
}
You can view a simplified version of the slider at http://codepen.io/MalikDrako/pen/XjbaWR
How can I ensure the two animations are synchronized?
Here i have customized the roundSlider in sample level to achieve your requirement.
In the below demo i have added an additional SVG element as range to apply the image for that. Please check the below demo, which demonstrate your requirement:
http://jsbin.com/debiyu/edit?html,output
For better understanding I have applied some other png images in the below demo, check that:
http://jsbin.com/henola/1/edit?html,output
From here you can customize further based on your requirement. I hope this helps you.. Please let me know your comments.
I'm attempting a CSS3 animation effect using a 3D transformation/transition. I have an HTML container, which is effectively divided up into "tiles" with another layer that sits on top. What I'd like to do is create a "flip" effect on individual tiles.
Like this, except where one of the layers is plain HTML (eg, text).
.sub {
-webkit-transition: -webkit-transform 0.6s linear;
}
.flip {
-webkit-transform: rotate3d(1,0,0,90deg);
}
After pondering this for a while, I'm not sure it's even possible. Here's what I attempted.
Container with some text as the back layer.
Layer tiles on top; set one tile's opacity to zero, creating a "window".
Now apply the transformation to the back layer.
Add a third layer on top, that is the same as the first layer.
This almost works, but not really; the "window" flips as it should, but of course the top layer is still visible over the window, ruining the effect.
Is there any way to accomplish this partial-flip effect?
I'm not sure but I think that this -> http://ryanlowdermilk.com/2012/03/windows-8-metro-tiles-with-html-css3-and-javascript/ is what you need...
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?