Can someone tell me anything about gate animation and zoom page transition from this Unicef web, I want to try to make this cool animation. At least give me "keyword" how to find it. Are those made with html5 ?
In the Unicef animation the developers are using a mix approach of JavaScript using GSAP JS library and CSS Transitions.
You can have a looks at their code in bundle.js and screen.css files using Chrome developer tools.
Generally you can use:
CSS Keyframe Animation
CSS Transitions
JavaScript vanilla or some libraries
Web Animation API
to animate DOM elements in your HTML page.
To help you to get started I have created a simple scale/zoom effect using CSS Keyframe Animation, but you can reach a similar effect using JavaScript libraries as jQuery, GSAP, Velocity or others.
For more complex animations I would suggest to use a specialized JS library as GSAP, if instead you need more simple, eyes catching animations you could consider also using some pre-made effects:
animate.css (CSS Keyframe Animation)
animatelo.js (Web Animation API) - disclaim I have created this library :)
It really depends of the complexity of you animation and your skill set.
#mario {
background: url(http://vignette1.wikia.nocookie.net/the-new-super-mario-bros/images/7/7e/200px-Mario_Nintendo.png/revision/latest?cb=20140505185215);
background-repeat: no-repeat;
width: 375px;
height: 375px;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-animation: leaves 5s ease-in-out infinite alternate;
animation: marioAnim 5s ease-in-out infinite alternate;
}
#-webkit-keyframes marioAnim {
0% {
-webkit-transform: scale(1.0);
}
100% {
-webkit-transform: scale(2.0);
}
}
#keyframes leaves {
0% {
transform: scale(1.0);
}
100% {
transform: scale(2.0);
}
}
<div id="mario"></div>
Related
As others have pointed out, CSS animations might get stuck or pause inadvertently because of performance issues, for example a busy JavaScript main thread, like CSS Animation, State change finish animation.
In the context of a webpage using existing third-party libraries or frameworks, we might have no control over the whole web app, so we cannot guarantee that the JavaScript behaves properly.
As there seems to be no way to increase an animation's priority over other browser tasks, and there seems to be no way to decrease the priority of browser tasks initiated by JavaScript so that CSS-initiated tasks are preferred either, and that may have unintended consequences as well, I want to focus on controlling the animation itself.
So, my questions are:
Is there a way to tell the browser, preferably using only CSS, that the animation should rather drop some frames to guarantee to reach the final state in time even if there are performance problems?
If so, can we use CSS animation syntax only, or do we need to use other techniques such as requestAnimationFrame() or complex libraries like GSAP?
Perhaps, there is something like a combination of animation-fill-mode and text-rendering: optimizeSpeed; but to control what to optimize when rendering animations, but I have searched and have not found anything helpful.
What I have tried so far:
.drawer {
position: fixed;
left: 100%;
transition: transform 3s;
background: blue;
}
.drawer.open {
transform: translateX(-400px);
animation-name: slidein;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes slidein {
0% { transform: none; }
25% { transform: translateX(-100px); }
50% { transform: translateX(-200px); }
75% { transform: translateX(-300px); }
100%{ transform: translateX(-400px); }
}
<div class="drawer" id="drawer">drawer</div>
show drawer
Although, this is supposed to be a minimal reproducible example, the bug is hard to reproduce when taken out of context. Please try to use CPU throttling in developer tools to see what I mean.
.drawer {
position: fixed;
left: 100%;
transition: transform 3s;
background: blue;
}
.drawer.open {
transform: translateX(-400px);
animation-name: slidein;
animation-duration: 3s;
}
#keyframes slidein {
0% { transform: none; }
25% { transform: translateX(-100px); }
50% { transform: translateX(-200px); }
75% { transform: translateX(-300px); }
100% { transform: translateX(-400px); }
}
<div>
<div class="drawer open" id="drawer">drawer</div>
show drawer
</div>
I want to rotate an image for a specific time (for example 2 seconds) and with a specific speed and then the rotation gets slower until it stops.
I am not an expert, I just know how to rotate and image with css, but not with a given speed and and ending.
Give this a try. Using keyframes is a good way to build an animation. The animation will run for 2 seconds. The ease out property makes the animation end smoothly.
The forwards property keeps the image from reverting back to its original orientation.
<img src="" class="rotation-class" />
.rotation-class {
width: 200px;
animation: rotate-animation 2s ease-out forwards;
}
#keyframes rotate-animation {
from {transform: rotate(0deg);}
to {transform: rotate(90deg);}
}
To make the animation faster shorten the length of the animation. You can also use percentages in your keyframes animation to further customize your animation.
#keyframes rotate-animation {
10% {
transform: rotate(0deg);
}
20% {
transform: rotate(90deg);
}
100% {
transform: rotate(90deg);
}
}
My application generates animations dynamically in server code. For the element to be animated, I apply the animation styles in-line, like so (the element IDs are GUIDs with a letter prefix to prevent collision):
<div class="ScrollingDiv" style="width: 100%; height: 27px;">
<p id="p9a6960428d594935b2540b1f8466f47a" style="animation:scroll-p9a6960428d594935b2540b1f8466f47a 10s linear infinite; width: 131px; height: 27px; transform: translateX(640px); -moz-transform: translateX(640px); -webkit-transform: translateX(640px); -moz-animation: scroll-p9a6960428d594935b2540b1f8466f47a 10s linear infinite; -webkit-animation: scroll-p9a6960428d594935b2540b1f8466f47a 10s linear infinite;">
This is a test
</p>
</div>
and assign that as the InnerHtml of the container. I also generate on the server side the keyframes, like so:
#keyframes scroll-p9a6960428d594935b2540b1f8466f47a { 0% { transform: translateX(640px); } 100% { transform: translateX(-131px); } }
and put them in a hidden field on the form for the client to add to the style sheet using Eli Grey's approach in this post.
function pageLoad(sender, args) {
var oStyleSheet = document.styleSheets[0];
oStyleSheet.insertRule(rule, oStyleSheet.cssRules.length);
}
I've verified that the style and rules are working in this Fiddle but it's not working when I add them programmatically. I can watch in the debugger that oStyleSheet is getting a new entry in its cssRules property. Any ideas as to either a) why it's not working or b) (better yet) how I can debug this myself?
I didn't read all the way to the bottom of the answer I cited. Turns out that you have to stop then restart the animation for changes to the style sheet to take effect.
I'm actually expecting the answer to this to be a simple and straight "NO", but I have to ask, maybe someone even already did a dirty workaround.
I made a character using CSS3 only and added an animation that slowly shakes his head. This can be seen as the idle animation. Now I added a specific talk animation (actually seperate, it's aplied to a different <div>) where he holds still and one where he shakes his head strongly. I apply the class .shakehead to the wrapper element via JavaScript at certain events.
#keyframes head-swing {
0% {
transform: rotate(-2deg);
}
50% {
transform: rotate(2deg);
}
100% {
transform: rotate(-2deg);
}
}
.head {
animation: head-swing 7s infinite ease-in-out;
}
.shake .head {
animation: head-swing 1s infinite ease-in-out;
}
Now, when I simply suddenly apply the class to the wrapper, the probability of changing in the middle of the animation and creating an ugly break is pretty high, so the best thing to do would be crossfading both animations. I want to avoid to wait for the animation end via JS, because seven seconds is a little much to wait for.
(my usecase)
If you don't know what I mean, watch this Unity3D tutorial for a minute.
Is such a crossfade in any way possible? (Probably NO)
A crossfade is possible with the opacity poperty. You can use multiple poperties in the same keyframe animation (and I'm pretty surprised that a lot of people don't know that), so don't be afraid to write height changes with of you opacity changes!.
You should also put your "moving mouth" into the same div than you first, at the exact same position and do your crossfade a bit like this.
#keyframes crossfade1 { /*applied on the "first" mouth (still)*/
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes crossfade2 { /*applied on the "second" mouth (moving) [the height is an exemple]*/
0% {
opacity: 0;
height: 3px /*the mouth is closed*/
}
50% {
opacity: 1;
height: 20px /*the mouth is open*/
}
100% {
opacity: 0;
height: 20px /*the mouth is closed*/
}
}
Put the duration as the same for the two keyframe animation and voilà! You have your perfect crossfade without even using javascript!
What do you think?
I discovered the "http://thegoodman.cc/". It's an absolutely amazing website.
I am just really really curious, as to how the body of this document is slightly faded in, and slide up in this page:
http://thegoodman.cc/about/
It's done using CSS animations. When looking at the source, you'll find this line of code:
.sup {
animation:sup 1.8s backwards;
}
#keyframes sup {
0% {
opacity:0;
transform:translateY(50px);
}
30% {
opacity:0;
}
100% {
opacity:1;
transform:translateY(0);
}
}
It'll fade in the text (using opacity) and move it up using translateY .
JSFiddle example.
Take note it's using the Prefix Free JS library to prevent having to add prefixes like -webkit-, -moz- etc.