I have a page that has an input field and a "next" button. When the user clicks next, I want to shrink the input field and remove the "next" button. I have it mostly working as seen in this Bootply. My CSS animations look like this:
.default {
transition: all 1.0s ease;
}
.exit {
padding-left:5rem;
padding-right:5rem;
}
.remove-button {
animation: animate-remove-button 1.0s;
}
#keyframes animate-remove-button {
from {
transform:scaleX(1.0);
opacity: 1.0;
}
to {
transform:scaleX(0);
opacity: 0;
}
}
The animation runs. However, after the animation has completed, the button reappears. In addition, I basically want the width of the button to shrink all the way to 0 so that the text field grows. But, as you can see in the Bootply, that's not really happening, even though it kind of looks like it is.
What am I missing?
.remove-button {
animation: animate-remove-button 1.0s;
animation-fill-mode: forwards;
}
animation fill mode: forwards tell to keep the last state of animation.
Documentation: https://developer.mozilla.org/en/docs/Web/CSS/animation-fill-mode
Related
I am trying to create this animation where the title is visible in the page initially then when you scroll down you trigger the title to slowly fade away and a subtitle fades in right after. I have the title part working but I can't seem to get the subtitle to appear with a smooth transition. At first I have my subtitle at "visibility:hidden" then when I scroll and the javascript adds the transition in class, it just abruptly comes in disregarding the transition property I gave it. Here is the fiddler I set up. Below is the javascript and css (respectively) i'm using to get this animation to work. Of course if there area any easier ways to achieve this feel free to let me know. Any advice or help will be GREATLY appreciated I have been researching and trying things to no avail.
Javascript
const element = document.getElementById('title');
const element2 = document.getElementById('subtitle');
window.onscroll = function() {
console.log("document element");
console.log(document.documentElement.scrollTop);
console.log("scrolling elemnent");
if (window.scrollY > 0) {
element.classList.add('fadeout');
element2.classList.add('fadein');
console.log("hello");
}
}
.fadeout {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
.two {
visibility: hidden;
}
#subtitle {
transition: opacity 2s linear;
}
.fadein {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
Currently your subtitle is at full opacity when you are fading it in (Because the visibility property does not set the opacity it just makes the element invisible)
Add opacity:0; to the .two CSS so that it will fade in.
Updated fiddle https://jsfiddle.net/s2cban6q (line 32 of CSS changed)
EDIT: Link to code added
I feel like it'd be good to give the context of the code since it seems to work without the ajax part.. here's the CodePen link to the project:
http://codepen.io/judysmilingeyes/pen/dNpxow
I am currently working on a project (a mini search engine) and got stuck on a jQuery question.
In theory it should work like this:
Upon click
- if the search field is empty, displays error message
- else append search result to the page, and display an animation which prompts the users to scroll down to check the results
I wrote the animation in CSS and it's working fine without JS/jQuery. To toggle on/off I first hide the HTML element and once the function enters the else statement I wrote a .show(), but in this case the loop of the animation is interrupted (it only runs once). Could anyone explain to me why this is happening/how to modify the code?
Here are the relevant HTML, CSS and JS/jQuery code. Much thanks in advance for any help/suggestions!
HTML
<div class="animation"><p>Scroll down for results</p></div>
CSS
#-webkit-keyframes results {
from{
top: 160px;
opacity: 1;
}
to{
top: 180px;
opacity: 0;
}
}
.animation {
-webkit-animation: results 1.5s linear infinite;
-moz-animation: results 1.5s linear infinite;
-o-animation: results 1.5s linear infinite;
animation: results 1.5s linear infinite;
position: relative;
text-align: center;
top: 160px;
}
jQuery
$(document).ready(function(){
$('.animation').hide();
$('#submit').click(function(){
var search = $('#search-field').val();
//error message when the entry is empty
if (search == ""){
$('ul').empty();
$('.main-body').append('<p class="error-message">Oops - did you forget to put in something?</p>');
}
else {
//clear old results
$('ul').empty();
$('.error-message').empty();
//get search results
$.ajax({
...
});
$('.animation').show();
}
});
});
Here is my site.
http://www.colleenbowes.com/#skills
I have messed around with this a lot that I kind of gave up. I still want it to animate but I am confused as to how. All I want is for my skill bars to animate when you scroll past an anchor point.
This is my animation:
Heres whats my css animation would look like on each bar (different widths though)
-webkit-animation: slide 3s forwards;
-webkit-animation-delay: 3s;
animation: slide 3s forwards;
animation-delay: 3s;
#-webkit-keyframes slide {
from {width: 0%;}
to { width: 90%; }
}
#keyframes slide {
from {width: 0%;}
to { width: 90%; }
}
Thanks.
How about this:
var target = $("#skills").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() >= target) {
// do your animation
clearInterval(interval);
}
}, 350);
Keep in mind that this is designed to run just the first time it is visible... no sure if this is expected. Also, since you do not describe your animation, I've just added the code that should detect your scrolling. If you add a bit more detail on your animation, I could extend the answer.
Hope this helps.
When a user comes to a website via www.example.com/#div4, I would like the division specified in the URL to be highlighted with #F37736 (orange) and then within 2 seconds transition smoothly back to #00A087 (the default color).
The div to be highlighted as a class of "fixed-nav-bar".
What I've tried:
var hash = false;
checkHash();
function checkHash(){
if(window.location.hash != hash) {
hash = window.location.hash;
} t=setTimeout("checkHash()",400);
};
You could look for the hash, then target the division by it's class name. You'll immediately change the color of the div to your orange color, then animate it back to your default color.
You will need to include the jQuery Color library to animate the background-color though, as vanilla jQuery cannot animate background-color. You can also use jQuery UI's highlight effect, thought the UI library is a little heavier in size.
$(document).ready(function () {
var hash = window.location.hash;
$('.' + hash).css('background-color', '#F37736').animate({
backgroundColor: '#00A087'
}, 2000);
});
This can be solved with just CSS using the :target pseudo-class. It allows you to highlight the item that has an ID matching the hash in your URL. A very simple example of this would be:
div {
background-color: #00A087;
}
div:target {
background-color: #F37736;
}
By default, a div would have a default colour but on finding a match it would switch to something different. To make it work in the way you specified, just sprinkle a bit of animation magic:
div {
background-color: #00A087;
}
div:target {
background-color: #F37736;
animation-delay: 2s;
animation-fill-mode: forwards;
animation-duration: 4s;
animation-name: highlight;
animation-timing-function: ease-in-out;
}
#keyframes highlight {
from {
background-color: #F37736;
}
to {
background-color: #00A087;
}
}
Here I've set the animation to delay for 2 seconds and to maintain the final state of the animation.
With the various properties available you can mix and match to make it work a little differently but this would achieve what was being asked in the question.
Example on CodePen
I'm assuming that, you wanna highlight the background color on some events.
Try adding this css to your code. This will highlight background color on hover.
.fixed-nav-bar {
background-color: #f37736;
}
.fixed-nav-bar:hover {
background-color: #00a087;
-webkit-transition: background-color 2000ms linear;
-moz-transition: background-color 2000ms linear;
-o-transition: background-color 2000ms linear;
-ms-transition: background-color 2000ms linear;
transition: background-color 2000ms linear;
}
Hope this will help you.
I'm trying to create a CSS animation that when a user clicks an element it animates to the right then when they click it again it animates to the left. The problem I have is that it is introducing flickering. I know the reason, but I'm not sure the best way to fix it. I want the most elegant solution for this problem.
I setup a jsFiddle (WebKit only) here: http://jsfiddle.net/4Ad5c/2/
The CSS:
.animateRight{
-webkit-animation: goRightLeft 1s;
-webkit-animation-fill-mode: forwards;
}
.animateLeft{
-webkit-animation: goRightLeft 1s;
-webkit-animation-fill-mode: backwards;
-webkit-animation-direction: reverse;
}
#-webkit-keyframes goRightLeft {
0%{margin-left: 0px;}
100%{margin-left: 100px;}
}
The JavaScript:
this.animateBox = function(className){
var box = document.getElementsByClassName('box')[0];
box.className = "box";
setTimeout(function(){
box.className = "box " + className;
},1);
};
When you click the Animate Right it works as expected, but when you click the Animate Left it will flicker to the left and then animate as expected. The reason is that you have to remove the class and add another in order to get the animate to run again, but I don't know the best way to get this working. I figure I could add a class when removing the previous animation that has it in its current state, but that seems wrong to me.
Thanks for the help!
Reason for flickering:
You are applying class box on click before setting the next animationClass which makes the box go to left abruptly. and then you are applying the animation to go reverse. So it causes flickering while it abrupty goes left (removal of class) and adding class in timeout causes revereses animation according to the fillmode and direction in animateLeft class and makes it even more worser as goRightLeft again adds margin pulls it to right due to the margin in the rule and webkit-animation-fill-mode: backwards; pushes to to the left. So one approach i mentioned here is to do the reverse (adding/reducing) the margin.
Here is one solution for this:
For real reverse animation you need to apply margin decresing from 100px to 0 as you do while forward animation. So just add keyframes for LeftToRight and apply that in animation.
Css
.animateRight{
-webkit-animation: goRightLeft 1s;
-webkit-animation-fill-mode: forwards;
}
.animateLeft{
-webkit-animation: goLeftRight 1s; /* Note the goLeftRight animation */
-webkit-animation-fill-mode: backwards;
}
#-webkit-keyframes goRightLeft {
0%{margin-left: 0px;}
100%{margin-left: 100px;}
}
#-webkit-keyframes goLeftRight { /* Note the new keyframes rule for reverse animation*/
0%{margin-left: 100px;}
100%{margin-left: 0px;}
}
Script
this.animateBox = function(className){
var box = document.getElementsByClassName('box')[0];
box.className = "box " + className;
};
Demo