This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 11 years ago.
http://visualidiot.com/articles/hacking-facebook
Going to any article on this website, you'll see that the main body of the page does an animation where it slides down, then up a little. The main body of the page animates, the header doesn't. When i've previously seen page load animations, they've been plagued with bugs, messing up when hitting the back button and going back to the page.
How exactly does this guy do that animation?
I'm Visual Idiot, the guy who made, well, my site.
Basically, as Seth's said, it's all in the animations.css, and, more specifically, it uses keyframe animations to get things done:
#-webkit-keyframes bounce {
0% { opacity: 0; -webkit-transform: translateY(-800px); }
60% { opacity: 1; -webkit-transform: translateY(25px); }
80% { -webkit-transform: translateY(-8px); opacity: .8; }
100% { -webkit-transform: translateY(0); opacity: 1; }
}
This defines an animation, which can then be used like so:
.bounce {
-webkit-animation: bounce .75s ease-in-out;
}
Now, whenever anything has a class of "bounce" added to it, it'll do that cute little effect pages have on my site. One thing to note, though: it seems to work better if you add the class via Javascript (on longer pages only, though), since it sometimes runs the animations before the DOM is ready,
If you want to learn more about keyframe animations in CSS, I suggest you check out Dan Eden's amazing animate.css library. I learnt a lot from pulling apart the source files.
Related
I know I can use hoverOpenDelay={0} and hoverCloseDelay={0}, but there is still a 100ms opacity transition on the popover container that I'm unable to change, as far as I can tell. I would like to remove this transition so the popover appears instantly.
Thank you for your help!
This is quite hard. Blueprint uses the react-addons-css-transition-group library that adds -enter, -appear, -leave, -enter-active, -appear-active, -leave-active suffixes to some class names of elements that need to be animated. In your case you probably need to manually override the overlay styles e.g. something like this:
.pt-overlay-enter,
.pt-overlay-appear {
opacity: 0;
}
.pt-overlay-enter-active,
.pt-overlay-appear-active {
opacity: 1;
transition-property: opacity;
// `step` didn't work cross browser for me
transition-timing-function: ease;
// i've found 0ms is causes react-addons-css-transition-group to fire events unreliable on certain browsers
transition-duration: 1ms
transition-delay: 0;
}
Of course, you'll want to narrow the scope of these rules to only to apply to popovers for which you want to remove animations.
If you want to see exactly what blueprint is doing to style the animation lifecycle classes, check out the styles here. The react-transition mixin is used here (among other places).
I have looked for an animation that moves image forward, at the same time flips and grows, to give the impression of walking forward. I tried creating this in photoshop, which works, but I couldn't resolve the problem of the space it takes up, disrupting other more important items on the page. I have tried adapting the 'rocket' from http://www.the-art-of-web.com/css/css-animation/ but don't know enough to add the flip I will add image to show what i am trying to do. - ok it seems I dont have enough reputation to post images, but i dont know how to get reputation!! Images would appear consecutively left to right.
This is not the image I will be using but demonstrates what I need. The one I will be using is copyright. All except the front center image is the same image (when I use my original there will be four different images center front).
Any help would be greatly appreciated.
setTimeout(function() {
var thething = document.querySelector('.thething');
thething.style.transform = 'perspective(500px) rotateY(80deg) translateX(-500px)';
}, 1000);
.thething {
background-color: red;
transition: transform 5s;
transform: perspective(500px) rotateY(80deg);
height: 200px;
width: 500px;
margin-top: 100px;
}
<div class="thething"></div>
This is generally what it might take to do the animation; I know it's not quite as involved as what you described in your comment, but largely it would involve a lot of grunt work and changing the numbers around. Let me know if there's anything critical here that you'd have trouble theorizing a way to do it.
I've attempted several different css animations to move a large image up and down on the screen while I have music playing. I haven't found any variation on speed, distance translated, etc that results in a smooth transition.
I'm developing a chromecast application where I have a very large, absolute-positioned DIV that I'm animating on and off of the screen. It has a pretty complicated layout in it with html, css and images, even animated GIFs. However, as long as I make sure there are no reflows while the animation is performing, I've gotten good performance by using transform: translate() CSS to control it's position. Previously, I was modifying the top CSS property, but the performance was pitiful.
For an example to illustrate, here's some HTML:
<body>
<div>
... Main content ...
</div>
<div id="overlay">
... Overlay content here ...
</div>
</body>
And the corresponding CSS:
#overlay {
position: absolute;
top: 25px;
left: 50px;
width: 1180px;
height: 670px;
transition: all 1s;
transform: rotate(-2deg) translateY(750px);
}
#overlay.active {
transform: rotate(-2deg) translateY(0);
}
With this, all I do in my javascript is toggle the active class on and off to cause the overlay to show and hide itself. I can't get the timeline debugger to work with the remote chromecast, so I don't know exactly what the FPS is, but it objectively feels like at least 30fps. It definitely seems smooth. I hope that helps.
If you look at the Events in the Timeline panel of the Chromecast Chrome debugger, what you'll find is that any Paint to a reasonable amount of the screen takes about 100ms. Yes, 1/10 of a second! This makes any kind of animation (CSS, JQuery, etc.) very tricky and often jumpy.
For the movement of elements, I haven't seen any difference in CSS animation performance vs. JQuery animation() performance. I expect because the awful Paint times hide any differences.
One would have thought that Google would have used some of that great video hardware to improve the Chromecast browser paint performance, but this type of Chromecast app does not appear to be one of their uses cases.
Remember that a Chromecast device
has limited resources (both CPU and memory)
has a stripped-down version of chrome
As a result, you won't be able to do many fancy transitions/translations that you are otherwise able to do on a desktop or the performance (how smooth it is) is not going to be what you would like it to be, more so if you are playing a media concurrently.
I have a lovely Star Trek Red Alert animation using CSS3. One of my parent elements has a border-radius along with overflow:hidden so that any content is cropped to the shape of the border radius.
This all works fine in Firefox but Webkit browsers leave some child elements hanging outside the cropped area.
Here is my code:
http://jsfiddle.net/doublewombat/EqK6R/embedded/result/
The div with the class name curvedEdges has the border-radius and overflow:hidden. However the blocks left & right of the 'Alert' text hang outside of this radius, even though they are child elements of curvedEdges. Or in plain English, the left and right edges of the animation should be slightly curved (as in Firefox), not dead straight.
So is this a bug in Webkit, or have I got something wrong?
Here it is on YouTube if you don't have a Webkit browser handy...
http://www.youtube.com/watch?v=3vyVy21nWsE
Firstly, what a cool demo!
I had a look around and it seems a problem not on you are having. The second answer to someone else's problem fixed it for me, although this doesn't work for safari. The fix is to use masking:
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
The accepted answer to that same question has another fix, which I think could really help you out, but I couldn't seem to get the right combination of elements and border-radius.
I'd been trying to do the same, and was using border-radius to mask elements to a circle.
I was able to use masking and a radial gradient to achieve the desired affect in Safari 6.0.3 (with transitions in position and size).
Here's the single line of code I added to the container (masking) element:
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
I thought I would have to use hard color stops, as follows, to get the hard edge:
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
However, it works the same without (perhaps someone can enlighten us on why). The clipping is not as smooth as with border-radius, but it beats the heck out of the image unpredictably exceeding the bounds.
You may need to adjust this for use with older versions of Safari/Chrome etc., I haven't tested it on different versions (aka YMMV).
It appears to be a browser issue as reported on: https://code.google.com/p/chromium/issues/detail?id=157218
Basically, when you apply animation to an element, the browser will handle it in the GPU (Graphics Processing Unit) for performance reasons, while the rest is handled by the CPU. That ends up rendering the animation above the mask.
As a workaround you can try adding an imperceptible transform property, that will also trigger GPU handling for the mask element, promoting it to the same level of the animation:
#redAlert .curvedEdge {
-webkit-transform: rotate(0.000001deg);
}
I guess it may vary depending on browser version, but these other values have also been reported to trigger GPU handling: rotate(0), translateZ(0)
It seems like its an issue with the GPU/hardware compositing. transform: translateZ(0); should fix the issue as well. For more information on this, read http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
-webkit-transform: translateZ(0);
transform: translateZ(0);
I have included vendor prefixes but you can remove them if you want.
Seems its a mixed working fix:
.wrap {
-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
http://jsfiddle.net/qWdf6/82/
You could put an absolute positioned div over it with a border-radius and a thick black border, it will block the parts you want too be hidden.
I made a demo for another question about a similar problem in FF3.6: http://jsfiddle.net/vfp3v/15/
border-radius; overflow: hidden, and text is not clipped
Just as a heads up, this fix only worked for me if I applied the mask on a container with border-radius, but no border. Ultimately I ended up with something like this:
<div style="border-radius: 15px; border: 1px solid red;">
<div style="border-radius: 15px; overflow: hidden; -webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);">
<span style="position: relative; left; -20px;">Some stuff that overflows.</span>
</div>
</div>
With a border on the inner div, the clipping wasn't perfect.
Totally weird.
I found another possible solution to this bug, using CSS3 clip-path, but it only works in recent versions of webkit (it seems to work in Chrome 24, but not Safari 6.0.2). The following will clip a circle around the element:
-webkit-clip-path: circle(50%, 50%, 100%);
Hopefully this will be implemented by more browsers soon! It seems like this feature could have a lot of cool applications. Here's a relevant blog post: http://blog.romanliutikov.com/coding/css-clip-path-landed-in-webkit/.
I added a box-shadow to a section of a page recently to give it the same shadow border effect that is seen on Mac OS X apps. It looked great, but I noticed that scrolling up and down on the page made it lag. I usually only see this on pages that have annoying background images and tons of images and embedded videos plastered all over (cough MySpace cough). I originally decided to use box-shadow since I figured that it would remove the need to use an image, which would remove any possibility of scroll lag.
I know that CSS3 is still new, but is this the reason for the lag? Is the shadow being software rendered or something? When I apply the box shadow to smaller elements, it doesn't lag at all. I'm just wondering if anyone else has experienced this.
I just tried it on the Stack Overflow front page, on the #content div using Firebug with a setting of:
-moz-box-shadow: 1px 1px 10px;
And I did notice some scroll lag afterwards. I am using Firefox 3.5.
My question is, what are some alternatives to using this attribute if I want to add a Mac OS X style border to a section of my page?
On a side note, does anyone know if it is possible to apply the box shadow only to the top, left, and right sides of the element and not the bottom? I tried 1px -1px 10px but it still shows the shadow on the bottom. If I keep decreasing the second offset, it eventually removes the shadow from the bottom but then the top shadow is now way darker and bigger.
And yes, I have seen the articles on box-shadow at:
CSS3 Info
fredericiana's blog
Your best bet would be to use -moz-border-image instead. That should solve both your issues.
E.g. you could use an image like this,
, combined with CSS like this
-moz-border-image: url(shadow.png) 10 / 10px;
to create your shadow. And since you're using an image, you can leave out the bottom shadow as well, if you want.
You're not going to be able to remove the shadow from the bottom using -moz-box-shadow; it's not called "box shadow" for nothing. It applies a shadow to the entire box. You can't specify a shadow for each side separately like with border, say. The best you could do is fiddle around with the placement, blur and spread of the shadow. But that inevitably leads to a darker shadow on the opposite side.
I get the box shadow lag as well when I try it on Stackoverflow. It affects performance on Safari as well when I try -webkit-box-shadow, though it isn't as noticeable as in Firefox. The performance will hopefully improve in the future, but I presume the shadow will always have some impact since as far as I know it is software rendered.
This has been fixed in webkit as of two days ago. :)
https://bugs.webkit.org/show_bug.cgi?id=22102
You can pick up a chromium nightly to try it out.
I looked in FF3.6 and FF4 and don't see terrible scroll performance there, so it might be addressed there as well.
The issue still persists in Chrome for Android as of the current date. Some box-shadow combos result in a poor scrolling performance. In my case stacking two inset box-shadows (e.g. top / bottom) lead to the described problem. The only solution I can provide is to make the box-shadows less complex and try again...that worked for me. That's unsatisfactory but yeah instead u can also use the border-image solution or remove the affected box-shadow completely. Hope this gets fixed soon, finally. Btw the Android Version of Firefox does not have the problems anymore (for my css3). Moreover the desktop versions of both browsers are not affected in my case.
#shadow {
-moz-border-image: url(img.png) 10 / 10px; #Firefox under v15.0#
-webkit-border-image: url(img.png) 10 / 10px; #Safari, Chrome under v15.0, Android & iOS#
-o-border-image: url(img.png) 10 / 10px; #Opera under v15.0#
border-image: url(img.png) 10 / 10px; #IE v11+, other new Browser#
}
Cross browser version for old and new browser.
Simple img: http://i28.tinypic.com/2njzkt1.png
style :fixed for images too overload perfomance browser