Using css animation I have an object that moves from the left to the right of the screen. However I've noticed that the animation is actually continuing after it has exited the right of the screen, which causes Chrome horizontal scroll bars to appear.
If you scroll right, it just shows the animated object no longer moving and a white background screen.
How do I kill the animation as soon as it leaves the view able screen?
The actual animation can be seen here. http://crea8tion.com/ChristmasMessage/index.html
The CSS code for the object is
.santa {
width: 1000px;
position: absolute;
top: -14%;
left: -55%;
-webkit-animation: santa-move 1s 1s ease-out forwards;
-webkit-animation-delay:5s;animation-delay:5s;
-webkit-animation-duration: 25s;
}
#-webkit-keyframes santa-move {
100% { left: 100%;}
}
There is a simple way to remove this extra scrollbar.
You can add a simple overlay: hidden to the parent div. In your case:
.columns {
overflow: hidden;
}
In this case, the santa animation didn't anymore add the horizontal scrollbar.
Related
CSS transition property is only working in one direction on <details> tag -- when opening. No transition when closing. I've tested on Chrome & Firefox.
To add, on Chrome, the opening transition only works once.
details
position: relative
ul
position: absolute
bottom: 100%
left: 0
height: 300px
display: flex
flex-direction: column
transition: transform 0.3s ease-in-out
transform-origin: bottom
transform: scaleY(0)
&[open]
ul
transform: scaleY(1)
The details tag works by instantly showing and hiding its contents. When you close it, the contents immediately disappear so no transition is witnessed.
I have created a simple slide out menu from the left of a page by simply applying a CSS Transition to a div. The div has the following CSS class:
#slidingBox {
position: absolute;
width: 400px;
height: 100%;
background-color: #d9dada;
top: 0px;
left: 0px;
margin-left: -390px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
overflow-y: scroll;
}
#slidingBox:hover {
margin-left: 0px;
}
and it works okay. I have 10px of the menu on the side that when I hover over it the whole panel becomes viewable. However, as soon as I move my mouse off the DIV it scutters back into hidding... Fair enough, thats how this hover over transition works I guess. I would however like to put a little pin button in the corner I can click which will then keep the menu visible. Also, the menu currently appears 'over' the page on screen - when 'pinned' I would also like the page underneath to resize so it is all viewable next to the pinned menu.
I could sit and play around with it for a bit but time is off the escence and if someone could point me in the right direction would be a great help!
I understand there are many different/better ways of doing what I have already done here so any other pointers would be a great help.
You could use jQuery to detect when the pin button is clicked and remove a class from #slidingBox to keep it expanded:
$('#pin-menu-button').click(function() {
$('#slidingBox').toggleClass('no-pin');
});
The .no-pin class is what gives the sidebar menu the negative left margin.
To make the pinned menu and content display side-by-side you could use flexbox styling. Make sure you set display:flex; for the container around the sidebar and main content area.
Here is a fiddle
I was wondering if anyone knows a way to change the content of a pseudo element (:before or :after) within a CSS animation.
It doesn't seem to be working in my fiddle, but maybe there's another way: http://jsfiddle.net/xfrfnav1/
Interesting suggestion, but apparently the browser (Chrome in my case) ignores the content. Makes a little sense. After all, it is for an animation, and the property is 'morphed' from one value to another gradually, which is not possible with content. Still, it would be nice of it worked.
A possible solution: put all the dots in there already and change the width. If you like, you can put the text 'loading' in :before (or in the div itself) and the dots in :after, so you can easily animate it from 0 to any desired width:
div:before {
content:"Loading";
display: inline-block;
overflow: hidden; /* Weird baseline behavior without this */
}
div:after {
content:".......................";
display: inline-block;
overflow: hidden; /* Hide the dots */
-webkit-animation: loading 4s linear 0 infinite;
}
#-webkit-keyframes loading {
0% { width: 0;} /* Only from and to are needed */
100% { width: 3em;}
}
Fiddle
I have a solution for you : here
I have added a fixed width on parent div, and Loading directly in content, your problem was content:""; with no content is hard to show text
My css :
div { width: 61px; }
div:after {
content:"Loading...";
display: block;
overflow: hidden; /* animation gonna reduce content width so points gonna hide */
-webkit-animation:loading 1s linear 0 infinite;
}
#-webkit-keyframes loading { /* be careful you must add -moz and other browser prefixed versions */
0% { width:80% }
25% { width:85% }
50% { width:90% }
100% { width:100% }
}
Works fine (at least in Chrome) if you change to: -webkit-animation:loading 1s infinite linear;
I am trying to create a menu that fades in/out when a button is clicked, and I am trying to do the animation using CSS transitions.
Here is a sample of what I want to achieve
#menu{
background: red;
display: block;
overflow: hidden;
position: absolute;
width: 182px;
top: 1em;
padding: 0;
height: auto;
opacity: 0;
/* The menu must not be clickable/cover the UI once hidden */
left: -100000px;
/*
The left property must change after the
opacity is zero and before it starts to
increase
*/
transition: opacity 0.25s 0.1s, left 0s; /* ??? */
-webkit-transition: opacity 0.25s 0.1, left 0s; /* Safari */
}
#menu.open{
opacity: 1;
left: auto;
}
http://jsfiddle.net/AzKAk/5/
Of course that only works half way, when the menu appears it DOES fade in, but when it has to fade out, this must happen after the element has its proper position.
Is it possible to do such thing using only CSS3?
I am assuming your intention is to have the menu appear/disappear in-place without any movement.
To do that you actually have to use a combination of two properties: opacity, and display.
The change in opacity will make the menu disappear, but once it reaches opacity:0 it will be invisible but still exist and receive user interaction.
So, you have to make sure that after the opacity transition is done, you have to change the display to none.
You can do this using the transitionend event (webkitTransitionEnd on Chome/Safari).
Your code would look something like this: http://jsfiddle.net/daniran/GfbVV/
I'm using jQuery in the example, but you can just as easily register the listeners directly using ontransitionend property;
I am trying to implement a CSS-based animation involving a single Unicode character:
HTML
<div class="spinner">⊗</div>
CSS
.spinner {
display: inline-block;
font-size: 42pt;
margin: 50px;
animation: spin 0.5s infinite linear;
}
#keyframes spin {
to { transform: rotate(360deg); }
}
* I've omitted the vendor-specific prefixes in this example.
However, when I view the page in my browser (Firefox 20.0), the character is slightly off-center, resulting in a "wobbly" animation.
You can see it live here: http://jsfiddle.net/bBaVN/77/
How can I completely center the character?
Proof of Concept using SVG
Consider the following:
<div class="wrap">
<span class="spinner">
<svg {...many other attributes...} class="logo">
...path code...
</svg>
</span>
</wrap>
See the fiddle: http://jsfiddle.net/audetwebdesign/3G3U7/
I found a SVG version of the symbol at:
http://www.fileformat.info/info/unicode/char/2297/index.htm
I had to take the SVG, open it in Adobe Illustrator and then reset the view port (bounding box?) using object->artboards->fit to artwork bounds.
I then saved as SVG and then cut-paste the <svg> block into the demo, and finally, I added the class="logo" attribute to the <svg> tag.
For styling, I used the following CSS:
.spinner {
display: block;
width: 50px;
height: 50px;
position: relative;
top: 75px;
left: 75px;
animation: spin 1s infinite linear;
}
.logo {
display: block;
width: 50px;
height: 50px;
}
I set the display type to block for both .logo and .spinner, and both have the same height and width (use a square box for best results.
Seems to work. The hardest part was learning how to set up the SVG inline image. I found the following reference useful: http://css-tricks.com/using-svg/
You could set the line-height to 45px on .spinner, this will ensure that the containing span element is as high as it is wide. Here's a jsFiddle. Now there is a little less movement, but it still doesn't look like it is not moving around at all.
Another way to get it to rotate around the center of character instead of around the center of the containing span would be to play around with -vendorspecificprefix-transform-origin. You could set it to rotate around another point e.g. setting it to: 23px 34px would set the x and y coordinates for the point to rotate around.
I think the fact that it still looks like it moves around a little bit might be due to the character not being rendered as a perfect circle, you could try rendering it in a different font, changing point sizes of the font, or even turning text-rendering: optimizelegibility; on or off might make a difference there.
The default value for -vendorspecificprefix-transform-origin is 50% 50%, this suggests that if you make sure that the character inside the element is perfectly centered, and you set the animation on the containing element, it should rotate exactly around the the center, and then playing with -vendorspecificprefix-transform-origin would only make things worse.
Another thought I'm having, by setting the point size of the text to 42pt, the width of the containing span becomes 45px, now 50% of that would be 22.5px, maybe it would work if you made the point size of the text a bit bigger, or just set the width and the height of the containing span to 46px, then 50% would be 23px, which might make the difference with the current movement.
Update:
I was able to get it to be centered perfectly in Chrome (and in FireFox) by using a mono-space font Courier, manually setting the line-height, height and width of the span to center the character, and then forcing the character to look more like a circle by moving it over by 0.5px using -webkit-transform: translate().
.spinner {
display: inline-block;
font-size: 42pt;
line-height: 50px;
height: 46px;
width: 46px;
margin: 50px;
-webkit-animation: spin 1s infinite linear;
-moz-animation: spin 1s infinite linear;
-ms-animation: spin 1s infinite linear;
-o-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
font-family: courier;
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg) translate(0.5px, 0px)}
to { -webkit-transform: rotate(360deg) translate(0.5px, 0px)}
}
I think the fact that I need 2 jsFiddle's to demonstrate for different browsers kind of answers the question about if you should be doing it this way, I think the differences in font-rendering between browsers will ensure that you can't do this reliably without browser detection.