I'm trying to highlight a div that wraps a contact form so the user knows where to go to contact. my link will be something like this
Contact Us
Going with a class since this will be used on the site in two places.
right now the current background for #form is #f5f5f5 so what I want to do is Flash a random color like #ff0000 and slowly fade it out back to #f5f5f5
demo on dabblet.com
Target pseudo-class applied to element which you are scrolled to.
Add this to your css:
CSS:
#form {
background-color: #f5f5f5;
}
#form {
background-color: #f5f5f5;
}
#form:target {
animation: target-fade 1s 1;
}
#keyframes target-fade {
0% { background-color: #ff0000; }
100% { background-color: #f5f5f5; }
}
HTML markup:
link to target #form
<form id="form">
…
</form>
PS:
Accordingly to caniuse.com CSS properties: animation and keyframes is needed vendor prefixes such this:
.box_animation:hover {
-webkit-animation: myanim 1s infinite; /* value is demo only */
-moz-animation: myanim 1s infinite;
-o-animation: myanim 1s infinite;
animation: myanim 1s infinite;
}
#-webkit-keyframes myanim {…}
#-moz-keyframes myanim {…}
#-o-keyframes myanim {…}
#keyframes myanim {…}
PPS: dabblet using prefix free JS library to paste all necessary prefixes. Later without this library you can see all you need prefix syntax on css3please
You can use the Ariel Flesler's ScrollTo jQuery Plugin to scroll with animation.
And for changing color with animation you use the jQuery Color Animation Plugin
example
$('selector').scrollTo( '520px', 800 )
.animate({backgroundColor:'#ff0000'}, {duration:5000,queue:false});
Edits
If you want to fade it back you can use toggle function.
$('selector').scrollTo( '520px', 800 )
.toggle(function() {
$(this).animate({
{backgroundColor:'#ff0000'}, {duration:5000,queue:false});
},
function() {
$(this).animate({
{backgroundColor:'#f5f5f5'}, {duration:5000,queue:false});
});
Related
I'm trying to get some text to slide from the left to the center of the webpage using HTML and CSS animations. The goal is to have the first block of text slide into the center first, then after a 2 second delay, have the second block of text slide into the center. So that there will be a nice effect of the reader watching lines as they are written on the page.
Here is the HTML code:
/* .slide1 {
-webkit-animation : slideIn 2s forwards;
-moz-animation : slideIn 2s forwards;
animation : slideIn 2s forwards;
} */
.slide2 {
/* animation-delay: 2s; */
margin-top : -20px;
-webkit-animation : slideIn 2s forwards;
-moz-animation : slideIn 2s forwards;
animation : slideIn 2s forwards;
}
#-webkit-keyframes slideIn {
0% { transform: translateX(-900px); }
100% { transform: translateX(0); }
}
#-moz-keyframes slideIn {
0% { transform: translateX(-900px); }
100% { transform: translateX(0); }
}
#keyframes slideIn {
0% { transform: translateX(-900px); }
100% { transform: translateX(0); }
}
<h1 class="slide1">You want to go to the moon.<br></h1>
<h1 class="slide2">We’re here to give you a shot.</h1>
So the trouble is, the animation is working for the second line, but not for the first line when you uncomment the class slide1 above.
The entire thing moves together, which is not what is supposed to happen. The point of having a delay for the animation in slide2 is meant so that after the first block of text finishes moving into the center, then the second block of text will start to move right.
It's confusing why this isn't working -
if you have any solutions to this, please share them!
you must first position your .slide1 and .slide2 off-screen
transform : translateX(-100vw);
...and contrary to what you imagine, the css commands must also respect an order and your delay command must be placed second after the global command of your translate
⛐ 😵 very very bad :
animation-delay : 2s;
animation : 2s slideIn forwards;
( it make animation-delay : 0; )
😁 😁 good :
animation : 2s slideIn forwards;
animation-delay : 2s;
.
otherwise you must respect the correct ordering of the arguments
animation : 2s 2s slideIn forwards;
but in my opinion the best way to write this - without repeating css:
.slide {
text-align : center;
transform : translateX(-100vw);
animation : 2s slideIn forwards;
}
.second {
margin-top : -.8em;
animation-delay : 2s;
}
#keyframes slideIn {
0% { transform : translateX(-100vw); }
100% { transform : translateX(0); }
}
<h1 class="slide">You want to go to the moon.</h1>
<h1 class="slide second">We’re here to give you a shot.</h1>
also note the use of units, and the correct way to center your text whatever the width of the display (as you indicate in your question)
I want to hide and show a div using css like :
Show => Hide => Show =>...
for do that I've tried that code:
#showMe {
animation: cssAnimation 0s 2s forwards;
visibility: hidden;
}
#keyframes cssAnimation {
to { visibility: visible;
}
}
but it will hide it only plz guys help!!
One way to do this is by adding keyframes for a specific progress (time-progress).
Some attributes in CSS are not animateable, so if you try to animate them they get instantly set to your "to" value, which is visible. To work around this, we simply set the visibility to hidden(in css) and keep it until 50% (in animation). At 51% we set it to visible, where it gets instantly shown (until the end).
To make it "blinking" you can repeat this animation by appending infinite which is a shorthand for animation-iteration-count: infinite.
#showMe {
animation: cssAnimation 1s infinite;
visibility: hidden;
}
#keyframes cssAnimation {
50% {
visibility: hidden;
}
51% {
visibility: visible;
}
}
<div id="showMe">(╯°□°)╯︵ ┻━┻</div>
Try to add property animation-iteration-count and set value it to infinite. It should play the animation infinite times.
.a.b{
border: 2px solid red;
animation-name: appear;
animation-duration: 1s;
animation-iteration-count: 1;
}
#keyframes appear{
from{opacity:0;
transform:rotateZ(20deg);
top:100;}
to{opacity:1;
top:0;
transform:rotate(0);}
}
#keyframes zoomer{
from{
opacity:0.5;
}
to{
opacity:1;
}
}
.a.b:hover{
animation: zoomer 1s linear 1;
}
<html>
<head>
</head>
<body>
<div>
<h1 class="a b">hello world</h1>
</div>
</body>
</html>
In the above code snippet, why does the #keyframes animation repeat when I use hover? The number of iterations are specified as 1.
My guess is that the class associated with the <h1> tag changes when we hover and then again changes when we remove the mouse. But how are we going to fix it?
The animation is triggering because the :hover pseudoclass overrides<h1>'s animation property. When the pseudoclass is removed, the animation property "changes" again, back to its original value, which triggers the animation.
There are a few ways you could get around this behavior. If you want to have the <h1> animate on load, but never again, consider creating a separate class:
.a.b.onload {
animation-name: appear;
animation-duration: 1s;
animation-iteration-count: 1;
}
Then in Javascript, remove the class after waiting 1 second for the initial animation to finish:
window.addEventListener("DOMContentLoaded", () => {
setTimeout( () => {
document.querySelector(".a.b").classList.remove("onload")
}, 1000);
});
I want to do this effect (jsFiddle, when hover on button):
This is a part of the code i need i guess, what i want is:
every two seconds on a div with this button as the background-image:
i want the shining effect like in the fiddle, that will swoop in and out fast, after two seconds, another swoop, etc...
is it possible with css only?
if no, with javascript, what should be the case for me to do it?
Should i do an interval of:
setInterval(function(){
document.getElementById('btnDiv').classList.add('shining');
setTimeout(function(){
document.getElementById('btnDiv').classList.remove('shining');
,1000)
,2000)
I know it's a bit overkill for this kind of effects, isn't it?
Since you already have the effect you want on :hover, just convert it to an animation.
#element {
animation: pulse 1s linear infinite alternate;
}
#keyframes pulse {
from {
/* define initial state of animation here */
}
to {
/* define final state of animation here */
}
}
Using linear infinite alternate will make the pulse go back and forth between the two states. Depending on the effect you want to achieve, you may have better results by using something like 40% and 60% instead of from and to respectively, to add a bit of delay around the pulse.
#nodelay, #delay {
width: 100px;
height: 100px;
background-color: #080;
border-radius: 50px;
}
#nodelay {
animation: pulse 2s linear infinite alternate;
}
#delay {
animation: pulse-delay 2s linear infinite alternate;
}
#keyframes pulse {
from {background-color: #080}
to {background-color: #0f0}
}
#keyframes pulse-delay {
from, 40% {background-color: #080}
60%, to {background-color: #0f0}
}
<div id="nodelay"></div>
<div id="delay"></div>
This is my code:
http://jsfiddle.net/NVk2N/2/
I'm trying to fade the large background image in. I tried this:
#cover {
background: url(http://bootstrapguru.com/preview/cascade/images/carousel/imageOne.jpg) no-repeat center center fixed;
background-size: cover;
height:100%;
width: 100%;
position:fixed;
opacity:0;
transition: opacity 2s;
}
however the image never appears. What am I doing wrong?
James
You actually need an animation of the opacity, in which you set animation-fill-mode: forwards so the last frame continues to apply after the final iteration of the animation.
Updated fiddle: http://jsfiddle.net/NVk2N/7/
#cover {
...
-webkit-animation: 2s show;
-moz-animation: 2s show;
-ms-animation: 2s show;
animation: 2s show;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#-moz-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#-ms-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
(of course you need to use vendor prefixes where necessary)
Note: If you need to fade-in only the background image (and not the whole element) you could load the background inside an absolute positioned pseudoelement (e.g. #cover:before) with a negative z-index and just apply the animation to the psuedoelement itself:
Here's an example on codepen: http://codepen.io/anon/pen/EJayr/
Relevant CSS
#cover {
position: relative;
width : ...;
height : ...;
}
#cover:before {
content : "";
position: absolute;
z-index : -1;
top : 0;
left : 0;
width : 100%;
height : 100%;
background: url(...) top left no-repeat;
-webkit-animation: 5s show;
-moz-animation: 5s show;
-ms-animation: 5s show;
animation: 5s show;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Animations on pseudoelements work fine on every modern browser (except in Chrome < 26 — as reported on issue #54699 — but not really a problem, since the current version at this moment is 34.0.1847.116)
you need to use some js code to trigger the animation property. just add a new class for #cover with opacity:1 and on body load assign this class to cover.
example
<body onload="document.getElementById('cover').classList.add('showed');">
To trigger a transition you actually need a trigger.
You are setting a opacity of "0" and this is what you get: 0 opacity.
The transition would work if the declaration of opacity would change from 0 to 1.
That is what transitions do.
The solution of Fabrizio Calderan with the Animation should do the job.
Working with the other answers that have been given will give you a fade on all the elements within that element so this will no achieve your desired result.
The best way to do this is to:
1) Create a div with a z-index of 1 which holds your background image and what you want to fade
2) Create another div with a z-index of 10 which holds your content which you dont want to fade and position it over the background div with position absolute.
3) Animate the background image with jquery animate
I hope this helps and that will give you your desired outcome!
I believe you may use keyframes and animations to get the job done.
It's not possible with purely css to fade only the background image. Reference: How to fade in background image by CSS3 Animation
The answer there explains that you may use <img> inside a <div> that you apply the fade animation on as there is no other way without anything but css.