I have a purely CSS animating ticker that on page load works perfectly. The speed of the animation is working exactly how I want it.
The problem is when you resize the browser. For some reason when you do this the animation speeds up and when the message has gone off the screen it doesn't come back for ages. I think its an issue with calculating widths but unsure how to fix it.
jsFiddle
https://jsfiddle.net/79cmwcjw/2/
CSS / Reduced for Brevity
#keyframes ticker {
0% {
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.inside {
width: auto !important;
display: inline-block !important;
height: 20px !important;
line-height: 20px;
white-space: nowrap;
padding:0 0 0 100% !important;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 20s;
}
.inside a {
display: inline-block;
padding:0 200% 0 0 !important;
}
It's caused by display: inline-block on .inside element. If you remove that, it will work properly. Here's the jsFiddle: https://jsfiddle.net/79cmwcjw/18/
Update:
Here's the new fiddle: https://jsfiddle.net/79cmwcjw/33/
Basically, you need to add position: absolute to the .inside element, and remove the padding from the a inside.
Related
I'm tryin to make a infinte animation but at some point it seems to hop back to the start.
Thats the code
h1 {
background: url(Pepesad.png) repeat-x;
width: 90%;
margin: 1em auto;
max-width: 600px;
height: 512px;
animation: flybirds 1s linear infinite;
}
#keyframes flybirds {
from {
background-position: 0px 0px
}
to {
background-position: 300px 0px
}
}
Some of the CSS rules you mentioned for h1 seems unnecessary for your purpose. Mentioning the width gives the animation very less space. Consider providing the h1 a container/ wrapper and set appropriate width for it.
h1 {
background: url(Pepesad.png) repeat-x;
height: 512px;
width: 5076px;
animation: flybirds 1s linear infinite;
}
Also in the keyframes you have mentioned the x-axis to 300px which cause the breaking effect during the animation. I suggest you update it
#keyframes flybirds {
from {
background-position: 0px 0px
}
to {
background-position: -100% 0px
}
}
Another alternative you could use is :
#keyframes flybirds {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-1692px, 0, 0);
}
}
Note: the reason why I suggest to use an additional at all, rather than animating background-position on h1, is so that we can use an animated transform to do the movement, which is much more performant.
I have a menu system where that when a ‘menu’ button is clicked some simple javascript allows a mobile menu to be shown as a drop-down.
I would like to have it so this menu transitions / animates in, but the display: none property seems to not be animatable with CSS animations. I don’t really want to just use opacity: 0 because the mobile menu will then be in the document flow, and on desktop devices I don’t wish this to be the case.
Is there any CSS solution to this? When I use the Greensock animation library, it allows you to animate or change the ‘display’ property. I can’t seem to get this to work with CSS animations though?
I’ve created a simple pen where I’ve just used a single div that animates (to keep it simple I haven't included any JS click events etc with this).
As you can see I’ve commented out the display: none on both the CSS for the id#bluebox and on the #keyframes animation. If you un-comment these you can see the problem that is created.
https://codepen.io/emilychews/pen/xPWddZ
CSS
#bluebox {
margin-left: 0px;
margin-top: 0px;
width: 100px;
height: 100px;
background: blue;
animation: appear 1s ease-in forwards;
opacity: 0;
/* display: none; */
}
#keyframes appear {
0% {/*display: none;*/ opacity: 0}
1% {display: block; opacity: 0.1;}
100% {opacity: 1;}
}
HTML
<div id="bluebox"></div>
I solved this by adding a transform: scaleY(0) to the element, and then animated this with the element on opacity: 0 for the first 1% of the animation, so you couldn't see the element 'scale up' so to speak. I used scale instead of width and height because width and height properties don't animate very well in terms of achieving the 60fps smoothness.
CSS
#bluebox {
margin-left: 0px;
margin-top: 0px;
width: 100px;
height: 100px;
background: blue;
animation: appear 1s ease-in forwards;
opacity: 0;
transform: scaleY(0);
}
#keyframes appear {
0% {opacity: 0;}
1% {opacity: 0; transform: scaleY(1)}
100% {opacity: 1; transform: scaleY(1)}
}
In this case, since you're attempting to animate the element, I would say you should probably use width and height to your advantage instead.
Something like this could act as a substitute for display none. (Codepen)
#bluebox {
width: 0px;
height: 0px;
}
#keyframes appear {
0% {
width: 0px;
height: 0px;
}
100% {
width: 100px;
height: 100px;
}
}
The width or height could also be replaced with your end width/height to allow for a more natural animation, depending on your goal. I can update the Codepen to include an example of what I mean if you'd like.
Let me know if this is what you were aiming for!
Edit: Fixed the Codepen link
I have a css transition that moves an element on hover and an animation that rotates the element on hover too. There's a delay on the animation equal to the transition duration so that after it's transitioned to it's correct position, the animation starts. And it works nice, however, when we mouse off, the animation stops but it doesn't transition back down.
Is it possible to get it to transition back after we mouse off and the animation ends?
You can see an example here: http://codepen.io/jhealey5/pen/zvXBxM
Simplified code here:
div {
width: 200px;
height: 200px;
margin: 40px auto;
background-color: #b00;
position: relative;
&:hover {
span {
transform: translateY(-60px);
animation-name: rotate;
animation-duration: 1s;
animation-delay: .5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
}
}
span {
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
bottom: 10px;
left: 0;
right: 0;
margin: auto;
transition: .5s;
}
#keyframes rotate {
from {
transform: translateY(-60px) rotate(0);
}
to {
transform: translateY(-60px) rotate(-90deg);
}
}
I have forked your project and adapted it so it works. You can find it here.
What I have changed is the following:
I give the white square a start position of top: 150px and let it, on hover of div, get a top: 0. The span gets a transition: top .5s and with that it goes to top: 0; on hover and back to top: 150px; when the mouse leaves.
I have removed the translateY(-60px); from the animation, because that would move it even more up when the animation would start.
Here's your new CSS:
div {
width: 200px;
height: 200px;
margin: 40px auto;
background-color: #b00;
position: relative;
&:hover {
span {
top: 0px;
animation: rotate 1s infinite .5s alternate;
animation-direction: alternate;
}
}
}
span {
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
bottom: 10px;
left: 0;
right: 0;
top: 150px;
margin: auto;
transition: top .5s;
}
#keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(-90deg);
}
}
Edit: The problem is that an animation is time-based and not action-based, which means that as soon as you trigger an animation, a timer starts running and it will run through all the keyframes until the set time has passed. Hover-in and hover-out have no effect, except that the timer can be stopped prematurely, but the animation will not continue (or reversed, which you wanted) after that. transition is action-based, which means it gets triggered every time an action (for example :hover) is happening. On :hover, this means it takes .5s to go to top:0 and when the hover ends, it takes .5s to got to top:150px.
I hope the above addition makes sense :)
As you can see, I also cleaned up a bit in your animation-name: etc., since it can be combined into one line.
As Harry pointed out, the problem is that you are animating/transitioning the same property, in this case transform. It looks like the current versions of Chrome/FF will allow the animation to take control of the property, thereby breaking the transition. It seems like the only way to work around this is to transition/animation a different property. Since you need to continue rotating the element, you could translate/position the element by changing the bottom property instead. I know that doesn't produce the exact same results, but nonetheless, it does move the element (just not relative to the parent element).
Updated Example
div:hover span {
bottom: 80px;
}
As an alternative, you could also wrap the span element, and then translate that element instead.
In the example below, the .wrapper element is transitioned to translateY(-60px) on hover, and then the child span element is rotated and maintains the animation.
Example Here
div {
width: 200px;
height: 200px;
margin: 40px auto;
background-color: #b00;
position: relative;
}
div:hover .wrapper {
transform: translateY(-60px);
}
div:hover .wrapper span {
animation-name: rotate;
animation-duration: 1s;
animation-delay: .5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.wrapper {
display: inline-block;
transition: .5s;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
text-align: center;
}
.wrapper span {
display: inline-block;
width: 20px;
height: 20px;
background-color: #fff;
}
#keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(-90deg);
}
}
<div>
<span class="wrapper">
<span></span>
</span>
</div>
I'm making a css animation (for starters just in Chrome, to avoid needing to retype a bunch of browser specific code a hundred times) with quite a lot going on:
First these steps simultaneously:
Children of element fade out
Height of element changes to fixes height
Background color of element changes
Next step:
Fade in a hidden element
As for what I have, all of step 1 seems to work. I'm tryng to do this all by adding a single class to the element itself, but this causes some difficulties with step 2. Because when the class is added the hidden element should be display: block;, but this unfortunately causes it to already take up space when the first steps are still going on.
Here is a live demo. It only needs to be 1-way, so you have to re-run the fiddle to try the animation again.
This is some basic html:
<div class="card">
<div class="check"><svg style='width:100px;height:100px; margin: 10px auto 10px auto; z-index:20; display: block;' viewBox='0 0 24 24'><path fill='red' d='M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /></svg></div>
<div>Random content</div>
</div>
And a part of the css:
.card.done div:not(.check){
transition: opacity .5s ease-in-out;
opacity: 0;
}
.check:not(.done){
display: none;
margin: auto;
opacity: 0;
transition: opacity 1s 0.5s ease-in-out;
}
.check svg{
height:100px;
margin:10px auto 10px auto;
}
.card.done div.check{
display: block;
opacity: 1;
-webkit-animation-name: fadeInFromNone;
-webkit-animation-duration: 1s;
}
#-webkit-keyframes fadeInFromNone {
0% {
display:none;
opacity: 0;
}
50% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
.card.done{
transition: height .5s ease-in-out;
background-color: #4CAF50;
height: 120px !important;
}
I not entirely sure I understand the problem but I think what your wanting is the SVG element to not take up space which you can do by making it position absolute
http://jsfiddle.net/p9czu73n/
.card.done div.check{
position:absolute;
margin-left:-50px;
left:50%;
....
}
just use:
$(".card").css("height", "auto");
or use add
height:auto; to .card class
anything will fine
I am trying to use a CSS animation to create a preloader animation for my gallery. When I am applying the CSS code below it looks ok in Chrome, Firefox, but it doesn't look nice in Internet Explorer and Safari. For your reference here is the original picture - for a demo see this fiddle.
I dug through most articles related to this topic and applied the fixes that seem to make sense (see comments in code), but alas it still looks like crap.
Do any of you CSS wizards have an solution for this issue?
div.preloader-container {
background-image: url('img/preloader.png') no-repeat !important;
background-size: 20px 20px !important;
height: 20px !important;
width: 20px !important;
position: relative !important;
top: 50% !important;
display: block;
margin-left: auto;
margin-right: auto;
/* Attempt to fix it 1 */
-webkit-backface-visibility: hidden !important;
-ms-backface-visibility: hidden !important;
-moz-backface-visibility: hidden !important;
backface-visibility: hidden !important;
/* Attempt to fix it 2 */
outline: 1px solid transparent !important;
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation:spin 2s linear infinite;
}
#-moz-keyframes spin { 100% {
-moz-transform:rotate(360deg);
}
}
#-webkit-keyframes spin { 100% {
-webkit-transform-style: preserve-3d;
-webkit-transform: rotate(360deg);
}
}
#keyframes spin { 100% {
transform:rotate(360deg);
}
}
Ok my in very specific instance the problem was that re-sizing a 200px image to 20px was handled badly by these browser. As soon as I decreased the size of the png to 40px and resize to 20px with the backgroud-size attribute it works like a charm. Hope that helps other people with the same issue.
Here is a demo fiddle with the solved issue and here is one with the issue still happening.
background-size: 20px 20px;