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?
Related
I have an element that will show some animation upon initial page load. After that, the element should be hidden and never show again.
This element is wrapped inside a parent container. Some user interactions may hide the parent container (display:none or hidden attribute). Every time after the parent container is re-shown, the element is animated again, which I would like to prevent. Why is the element re-animated every time it is re-shown? Any CSS rule to disable this behavior?
Here is an example. Once you hover over the link and hover out, the element is animated again.
Is it possible to prevent it through pure CSS, not involving any Javascript? How?
If the goal is for the animated element to basically be gone and not overlap anything after the animation is complete, you can take out the forwards state of your animation, and make the inherent height of your .block element 0px. Then set the 0% and 100% keyframes to the height you want (100px), and after the animation is done the block will be gone, for all intents and purposes, having a height of 0 and no clickable area.
#keyframes drop {
0% {
transform: translateY(-150%);
opacity: 0;
height: 100px;
}
15% {
transform: translateY(10%);
}
20% {
transform: translateY(-10%);
}
25% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(1);
opacity: 1;
height: 100px;
}
}
.block{
width:100px;height:0px;background:black;
animation: 1.3s 2 alternate drop;
}
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>
I am using the following CSS file in order to add some animations to my website that I'm building:
http://www.justinaguilar.com/animations/scrolling.html
Its concept is pretty simple - You add class names to your div to have it animated when you get to it when you scroll the page up/down.
I want to add a tweak there, which will add a slight delay between each animation. That way, all the animations in the same line, would appear one by one, and not all by together at the same time.
My idea was to add a class name, for instance: delay-1, and it will add animate-delay: 1s; to it.
Here's a live example of what I want to do. Scroll down and see how "Our Progress" displays each animation with a delay:
http://demo.qodeinteractive.com/river/home-anchors/#home_presentation
Is this something I can do with CSS3 only? whether the answer is yes or no I would be much appreciate any help.
Yes, CSS3 transition will do the trick , i have a demo page set up long time ago. You can refer to it..
As you can see, the first item has a 2s delay and the second item has no delay. Good Luck
#demo:hover {
width: 300px;
transition-delay: 2s
}
#demo1:hover {
width: 300px;
transition-delay: 0s
}
http://jsfiddle.net/zFbkL/
try to define class like this:
.delay-1 {
animation-delay:1s !important;
-webkit-animation-delay:1s !important;
}
no idea if it will work ...but worth trying
..yes ...it will do the job - it worked for me
You would still need to add a class to the section when you scroll to it via Javascript but you can use nth-child() to target each one.
Let's say there's 4 steps you could do:
.steps .step:nth-child(1) { transition-delay: 1s; }
.steps .step:nth-child(2) { transition-delay: 2s; }
.steps .step:nth-child(3) { transition-delay: 3s; }
.steps .step:nth-child(4) { transition-delay: 4s; }
Though, with an unknown number of steps you're better off scripting this out I think.
$('.steps .step').each(function(i){
$(this).css('animation-delay', i + 's');
});
Then, set off the animations by adding a class to .steps.
.steps .step { trainsition: all 1s; opacity: 0; width: 0;}
.steps.in-view .step { opacity: 1; width: auto; }
Hopefully this is what you were aiming for.
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.
I am experimenting with WebKits animations.
Is it possible for a HTML element to have more than one animation executing at the same time?
For example:
#-webkit-keyframes FADE
{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes TRICKY
{
0% {
-webkit-transform: translate(0px,0) rotate(-5deg) skew(-15deg,0);
}
50% {
-webkit-transform: translate(-100px,0) rotate(-15deg) skew(-25deg,0);
}
75% {
-webkit-transform: translate(-200px,0) rotate(-5deg) skew(-15deg,0);
}
100% {
-webkit-transform: translate(0px,0) rotate(0) skew(0,0);
}
}
// Can this element have FADE execute for 5 seconds BUT halfway between that animation
// can I then start the TRICKY animation & make it execute for 2.5 seconds?
#myEle {
-Webkit-animation-name: FADE TRICKY;
-Webkit-animation-duration: 5s 2.5s;
}
The above was a really simple example. I would have many libraries of animations such as rotate, fade, etc. And I dont want to have to write a special animation if I want to have an element execute 2 animations at the same time.
Is this possible...
//Not sure if this is even valid CSS: can I merge 2 animations easily like this?
#-webkit-keyframes FADETRICKY
{
FADE TRICKY;
}
#myEle {
-Webkit-animation-name: FADE,TRICKY;
-Webkit-animation-duration: 5s,2.5s;
}
Use ',' no space. I was in Chrome version 16.0.899.0 to try.
You'll have to manually merge the animations, I think.
If you need to use something like this in several places I'd take a look at Less CSS or similar, so that you can use "mixins" (e.g. functions) to generate css. I use it for abstracting vendor specific css so that in the main .less file 5 or 6 lines of browser specific code can be replaced by one method.