I've seen this type of animation on a website just when CSS3 key-frames started to gain momentum, but couldn't find it nor could I replicate it using CSS or jQuery, and here's where I thought some of you could help.
I've animated what I hope to achieve and I've embedded it below. I believe this can be coded using the new CSS3 key-frames or jQuery's .animate(); feature. I don't know. I've tried everything I know, but all in vain.
Here's the GIF animation of what I wanted:
I just noticed, http://droplr.com/ uses a very similar transition on their home page, but with a few sliding effects. And the data (words) that come up are all random, all the time. I'd like to know how that is possible!
DEMO
A possible solution with pure css!
#-webkit-keyframes fade-in{
from{
opacity:1;
top:0px;
}
to{
opacity:0;
top:-5px;
}
}
.text-animated-one{
display:inline;
position:relative;
top:0px;
-webkit-animation:fade-in 1s infinite;
}
.text-animated-two{
opacity:0;
display:inline;
position:relative;
margin-left:-56px;
-webkit-animation:fade-in 1s infinite;
-webkit-animation-delay:0.5s;
}
.aggettivi{
display:inline;
width:100px;
height:100px;
}
I know that question is solved, but I thought it might be helpful for someone else so I decided to share xD
I was looking for something more smoother than the sugestion that here was presented, after spend a time looking i made my own solution
Here we will need to think a bit in terms of timeline of an keyframe, in that case the text will only be displayed when the another one has already completed his fade animation
div{
posititon: relative;
}
.js-nametag{
position: absolute;
}
.js-nametag:nth-child(1){
animation-name: fade;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate-reverse;
}
.js-nametag:nth-child(2){
animation-name: fade;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate;
}
#keyframes fade{
0%,50% {
opacity: 0;
}
100%{
opacity: 1;
}
}
<p class="js-nametag">Leandro de Lima</p>
<p class="js-nametag">Game Master</p>
https://codepen.io/theNewt/details/PdWeKX
Some extensive Google Searching and experimenting has led me to the point where I can answer my own question, and just in time too!
If any of you would like to know how that can be done, check out this CodePen snippet I wrote: http://codepen.io/AmruthPillai/pen/axvqB
Something like this:
JSFiddle Demo
HTML
<p>I am <span>Something</span><span class="hidden">Test22222</span></p>
CSS
.hidden {display:none;}
span { position: absolute; left:45px; top:10px;}
p {width:200px; border:1px solid #000; padding:10px; position:relative;}
jQuery
$(document).ready(function() {
// run the fade() function every 2 seconds
setInterval(function(){
fade();
},2000);
// toggle between fadeIn and fadeOut with 0.3s fade duration.
function fade(){
$("span").fadeToggle(300);
}
});
Note : this only works with toggling 2 words, it might be better to have an array of words, and to write a function to loop through those and apply the `fadeIn/fadeOut animation.
Edit : Here is a solution for multiple words - https://stackoverflow.com/a/2772278/2470724 it uses an array to store each word and then loops through them.
Edit 2 : Non-array solution : http://jsfiddle.net/kMBMp/ This version loops through an un-ordered list which has display:none on it
The lowest effort approach is probably to use the Morphext jQuery plug-in:
https://github.com/MrSaints/Morphext
It's powered by animate.css, so it's easy to change the animation style of the text.
If you're looking for something a bit more powerful (can specify in AND out animations; animate not just text), there's a spin-off called Morphist:
https://github.com/MrSaints/Morphist
Related
Im coding an interactive element that turns to look towards you when you click on it. I just have an onclick event that adds a class with the animation. Unfortunately, after playing the first time the animation does not reset. I found a question asking the same thing, but it was much too advanced for me and additionally used webkit which I dont want to use for this. Is there a simple way to reset the animation?
.susanb{
background-image:url('susanb.png');
background-size:contain;
width:18%;
height:45%;
background-repeat:no-repeat;
margin-top:12%;
margin-left: 60%;
position:absolute;
}
.susanbstare{
animation-name: stare;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes stare{
0%{background-image: url('susanbstarin.png')}
99%{background-image: url('susanbstarin.png')}
100%{background-image: url('susanb.png')}
}
<div class="susanb" id="susan"><div style="width:100%;height:100%;position:absolute;" onclick="stare();"></div>
<script>
function stare(){
document.getElementById("susan").removeAttribute("class");
document.getElementById("susan").setAttribute("class", "susanb susanbstare");
}
</script>
</body>
.susanbstare {
animation: stare 2s infinite;
}
BTW in JS, this is better
document.getElementById("susan").classList.toggle("susanbstare");
instead of these 2 lines
document.getElementById("susan").removeAttribute("class");
document.getElementById("susan").setAttribute("class", "susanb susanbstare");
I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen.
However, it always goes back to its original state once it has played. Anyone know how I can stop it on its last css frame (100%), or else how to get rid of the whole div it is in once it has played.
#keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
You're looking for:
animation-fill-mode: forwards;
More info on MDN and browser support list on canIuse.
If you want to add this behaviour to a shorthand animation property definition, the order of sub-properties is as follows
animation-name - default none
animation-duration - default 0s
animation-timing-function - default ease
animation-delay - default 0s
animation-iteration-count - default 1
animation-direction - default normal
animation-fill-mode - you need to set this to forwards
animation-play-state - default running
Therefore in the most common case, the result will be something like this
animation: colorchange 1s ease 0s 1 normal forwards;
See the MDN documentation here
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
Browser Support
Chrome 43.0 (4.0 -webkit-)
IE 10.0
Mozilla 16.0 ( 5.0 -moz-)
Shafari 4.0 -webkit-
Opera 15.0 -webkit- (12.112.0 -o-)
Usage:-
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
The best way seems to put the final state at the main part of css. Like here, i put width to 220px, so that it finally becomes 220px. But starting to 0px;
div.menu-item1 {
font-size: 20px;
border: 2px solid #fff;
width: 220px;
animation: slide 1s;
-webkit-animation: slide 1s; /* Safari and Chrome */
}
#-webkit-keyframes slide { /* Safari and Chrome */
from {width:0px;}
to {width:220px;}
}
Isn't your issue that you're setting the webkitAnimationName back to nothing so that's resetting the CSS for your object back to it's default state. Won't it stay where it ended up if you just remove the setTimeout function that's resetting the state?
I just posted a similar answer, and you probably want to have a look at:
http://www.w3.org/TR/css3-animations/#animation-events-
You can find out aspects of an animation, such as start and stop, and then, once say the 'stop' event has fired you can do whatever you want to the dom. I tried this out some time ago, and it can work, but I'd guess you're going to be restricted to webkit for the time being (but you've probably accepted that already). Btw, since I've posted the same link for 2 answers, I'd offer this general advice: check out the W3C - they pretty much write the rules and describe the standards. Also, the webkit development pages are pretty key.
Nobody actualy brought it so, the way it was made to work is animation-play-state set to paused.
I learned today that there is a limit you want to use for the fill-mode. This is from an Apple dev. Rumor is * around * six, but not certain.
Alternatively, you can set the initial state of your class to how you want the animation to end, then * initialize * it at from / 0% .
I have three divs on the same line. You can check the example here: http://yoyo.ro/abw just scroll to the bottom of the page to the three boxes: Made to Measure, Instagram and Video Tracking.
When I click the left one, I want the other two to slide to the right and some text to appear. I tried to do it, but it seems that I complicated it so much and it isn't even smooth.
function hideTest(){
$(".instagram").addClass("slideout");
$(".videotracking").addClass("slideout");
$(".instagram").animate({left:"150%"},500);
$(".videotracking").animate({left:"150%"},500);
}
function showTest(){
$(".instagram").animate({left:"33.3%"},500);
$(".videotracking").animate({left:"66.6%"},500);
$(".instagram").removeClass("slideout");
$(".videotracking").removeClass("slideout");
}
$(".madetomeasure").on('click',function(){
var testwidth = $(this).find(".vc_btn3-container").width();
$(this).find(".vc_btn3-container").css("width", testwidth);
if(!$(this).hasClass("openslide")){
hideTest();
$(".madetomeasure").addClass("openslide");
$(this).find(".txtbox").animate({left:0},500);}
else {
$(this).find(".txtbox").animate({left:"-100%"},500);
$(".madetomeasure").removeClass("openslide");
showTest();
}
});
here is the css relevant to the JS
.txtbox{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 66.5%;
display:none;
left:-100%;
padding:0px 15px;
float:left;
position:relative;}
.instagram, .videotracking{position:static;}
.instagram {left:33.3%;}
.videotracking{left:66.5%;}
.instagram.slideout{position:absolute;}
.videotracking.slideout{position:absolute;}
.madetomeasure .button{
z-index:1;
height:300px;
background: url(http://yoyo.ro/abw/wp-content/uploads/2016/02/instagram.jpg) 100% 30% !important;
border: none !important;}
.madetomeasure.openslide {width:100%;}
.madetomeasure.openslide .wpb_wrapper {display:flex;}
.madetomeasure.openslide .txtbox {display:block;}
Thank you so much for the patience... :) I really appreciate it
As far as I know, your problem of smoothness is because:
jQuery change the inline styling of the animated element per frame. That is a lot of work and you can actually see the action if you inspect your element when it's animating.
CSS does poorly on animating left and right. There are many articles about this but here's one if you don't want to search: https://css-tricks.com/tale-of-animation-performance/
The Solution
Fiddle: https://jsfiddle.net/kv5twc64/1/
The solution is very common, and is used by many CSS libraries, a trick using .active, CSS animation and some JS.
Here I used the transition property for .card:
.card {
display:inline-block;
float:left;
max-width:33.333%;
position:relative;
cursor: pointer;
transition: 0.5s all ease-out;
}
If you don't know, transition will create a tweening effect when the elements' property has changed.
And here is the trick: By using ~ selecting the siblings in CSS and the transform property:
.card.active .desc {
transform: translateX(0);
}
.card.active ~.card {
transform: translateX(66.666vw);
}
There are several upsides on using CSS in this case:
You can simplify your JS. The JS became:
$(function(){
$(".card").eq(0).click(function(){
$(this).toggleClass("active");
})
})
You can improve webpage performance
You can have more choices on (simple) easing functions in CSS (jQuery only offers "swing" by default). Check this out: http://easings.net You can do something like this:
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
Hope this can help. But the lesson here is: Use CSS rather than JS when you can!
P.S. 66.666vw means 2/3 the width of the viewport width.
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 am using Animate.CSS and I am using the "hinge" effect to have an image fall off the screen. Works great in real browsers but of course not in IE 9 or below. Is there a way to make this effect work with jQuery or javascript? Or will I have to add a jQuery transition to fade the image out?
Thanks!
Code:
HTML
<img id="animate" class="fear" src="/2012/images/september/fear-sign.png" />
CSS
.fear{
position:absolute;
left:150px;
top:0px;
}
#animate {
-moz-animation-delay: 5s;
-webkit-animation-delay: 5s;
-o-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
}
JS
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('#animate').addClass('animated hinge');
});
Here is a fiddle I created showing the animation effect.
While not as smooth as the Animate.CSS Hinge effect I ended up using jQuery to make the image fall off the screen (well fall and fade out.)
I had help from CoreyRS and his answer and method can be found here.