I have this hover effect http://codepen.io/anon/pen/dMbEdq but problem is that after animation finishes, the hover disappear. I need that hover to stay. Any suggestion?
<div class="hover15">
<figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure>
</div>
Use following Code :
transition-duration: 100s;
Use the following code where ever you want animation to hold or stay for sometime. And if you want it to loop or play # click events kindly refer to KeyFrames.
Use like this :
#keyframes hover {
0% {
// normal styles
}
100% {
// hover styles
}
}
.class {
animation-name: hover;
animation-duration: 1ms;
animation-fill-mode: backwards;
animation-play-state: paused;
}
.class:active,
.class:focus,
.class:hover {
//hover style you define
}
Reference click here to see the effect
Related
I have this CSS on some messages in a Ui I'm working on.
opacity: 0;
animation-name: fadeIn;
animation-duration: 1s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
It fades in new items. Works great EXCEPT.... it fades ALL messages when the page loads. I ONLY want messages to fade in if they are NEW. Imagine a new message coming into an existing list.
Is there a way to tweak this animation to not trigger on page load? I could probably rig something with JS, but was curious if there is a pure CSS way to do this.
We gotta find a way to tell css which are new and which are old... we could use a property within the object perhaps?
js where we set the class based on the status field being 'new' or otherwise:
dataSet.map((item, key) => {
return (
<div className={item.status === "new" ? "newClass" : "oldClass"}>
{item.name} - {item.status}
</div>
);
})
sample stackblitz
I'm trying to get a css background color to fade out right after the page loads without any user interaction. Can this be done?
This can be done using CSS animations. There is a property animation-delay which can be set in seconds.
animation-delay: 2s;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
Here is a simple example of a background fading after 2 seconds: http://jsfiddle.net/eKAf2/
Personally I'd have the background set in CSS. Then modify the document with jQuery. So I'd set the background color
CSS
body {
background: #009dff;
}
Then set the background color that the page fades into, and add the transition
JS
$(document).ready(function() {
$("body").css("transition", "3s"); // Adding transition
$("body").css("background", "#fff"); //Background color to fade into
});
Plus here's a demo.
With pure JS you can use onload on the body and set up a function, then call it that way.
If you had an element eg: .elem
<div class="elem"></div>
Styles:
.elem {
width: 100px;
height: 100px;
background: red;
}
You could have a css class eh .nobackground that set the background to transparent with a transition.
.nobackground {
background: transparent !important;
transition: all 1s;
}
You could then apply this class to the element on page load with jquery.
$(document).ready(function(){
$(".elem").addClass("nobackground");
});
Heres a bin. Hope this helps.
I have 2 element, one on top of the other and they both animate. Despite using the same keyframe rule and animation properties, the elements are out of sync on the first loop but are in sync after the first loop. WHY?!
The markup:
<div class="small xfade">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="big xfade">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
The css:
#keyframes xfade {
0% { opacity:1; }
17% { opacity:1; }
25% { opacity:0; }
92% { opacity:0; }
100% { opacity:1; }
}
.xfade span {
animation-name: xfade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
fiddle
EDIT In my real-world implementation, the "small" elements are translucent, so the ones underneath are visible at the start of the animation. I thought setting opacity: 0; on all of small's children would solve this (since the keyframe rule brings it back to 1 as soon as the animation kicks in); alas no. This issue also mysteriously solves itself after the first loop.
Any tips for that would also be appreciated.
As vals mentioned, one of the color code you have given is wrong, so first and second color is same. So it feels like the animation is not working as it is same color. (But actually its working)
So, I changed the color code and working fine.
.xfade.big span:nth-of-type(4) {
background: #0300FF;
}
Working Demo
I'm trying to animate (fade-in) 3 buttons. This is my html:
<aside>
<p><i class="icon-facebook"></i> Share</p>
<p><i class="icon-twitter"></i> Tweet</p>
<p><i class="icon-envelope"></i> Mail</p>
</aside>
and this is my css (the class .aside-check gets applied by javascript)
.aside-check {
animation: fadein 2s;
}
#keyframes fadein {
from {opacity:0;}
to {opacity:1;}
}
What I would like now, is to give every paragraph a little delay, I tried
p:nth-child(1) {animation-delay:2s}
p:nth-child(2) {animation-delay:3s}
p:nth-child(3) {animation-delay:4s}
but that doesn't work. Unfortunately I don't know what I did wrong...:/
Well, first you need to apply the animation to the paragraphs not the aside. Always remember, animations don't inherit. Second, don't forget your webkit prefixes! It's a pain but webkit browsers still require -webkit- before all animation properties and keyframe definitions. Without it your animation won't work on, Chrome, Safari, Android, etc. (If you can't remember if you need prefixes take a look at caniuse.com http://caniuse.com/#feat=css-animation)
Also note that if you want the paragraphs to be hidden then revealed you will want to define them with an opacity of 0 and then set the 'animation-fill-mode' to forwards so that the properties in the 'to' frame stick after the animation finishes.
I made a little JS fiddle with a working example, hope it helps!
http://jsfiddle.net/Ashwell/HqBZU/
Here are the important bits:
The animations applied to the paragraphs with the fill-mode set and starting opacity.
.aside-check > p{
animation: fadein 2s;
-webkit-animation: fadein 2s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
opacity: 0;
}
You'll also need the webkit key frames
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
And don't forget to add -webkit-animation-delay: 2s; to each of the nth-child selectors with the respected delay time!
I hope this answer isn't coming too late!
I'm making a simple landing page driven by CSS3. To make it look awesome there's an <a> plopping up:
#keyframes splash {
from {
opacity: 0;
transform: scale(0, 0);
}
50% {
opacity: 1;
transform: scale(1.1, 1.1);
}
to {
transform: scale(1, 1);
}
}
And to make it even more awesome I added a hover animation:
#keyframes hover {
from {
transform: scale(1, 1);
}
to {
transform: scale(1.1, 1.1);
}
}
But there comes the problem! I assigned the animations like this:
a {
/* Some basic styling here */
animation: splash 1s normal forwards ease-in-out;
}
a:hover {
animation: hover 1s infinite alternate ease-in-out;
}
Everything works just fine: The <a> splashes into the users face and has a nice vibration when he hovers it. Bit as soon as the user blurs the <a> the smooth stuff ends abruptly and the <a> repeats the splash-animation. (Which is logical to me, but I don't want it to)
Is there some way to solve this problem without some JavaScript Class Jiggery Pokery?
After hours of googling: No, it's not possible without JavaScript. The animation-iteration-count: 1; is internally saved in the animation shothand attribute, which gets resetted and overwritten on :hover. When we blur the <a> and release the :hover the old class reapplies and therefore again resets the animation attribute.
There sadly is no way to save a certain attribute states across element states.
You'll have to use JavaScript.
If I understand correctly that you want to play the animation on A only once you have to add
animation-iteration-count: 1
to the style for the a.
It can be done with a little bit of extra overhead.
Simply wrap your link in a div, and separate the animation.
the html ..
<div class="animateOnce">
<a class="animateOnHover">me!</a>
</div>
.. and the css ..
.animateOnce {
animation: splash 1s normal forwards ease-in-out;
}
.animateOnHover:hover {
animation: hover 1s infinite alternate ease-in-out;
}
I just got this working on Firefox and Chrome. You just add/remove the below class accordingly to your needs.
.animateOnce {
-webkit-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
-moz-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
-o-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
}
Just use
animation: hover 1s ease-in-out forwards;
An easy solution to solve this problem is by just adding more seconds to the animation in a:hover and taking advantage of the transitions in #keyframes
a:hover {
animation: hover 200s infinite alternate ease-in-out;
}
Just make the progression of #keyframes go faster by using percentages.
#keyframes hover {
0% {
transform: scale(1, 1);
}
1% {
transform: scale(1.1, 1.1);
}
100% {
transform: scale(1.1, 1.1);
}
}
200 seconds or 300 seconds in the animation is more than enough to make sure the animation doesn't restart. A normal person won't last more than a few seconds hovering an image.
Impossible in CSS only, you need a javascript workaround. As already explained by some here, the animation-iteration-count property is reset on a :hover. The best is to do everything in javascript, but for reasons of ease of customization of the code you may want to keep the possibility of doing something in CSS.
So, in JS :
// adding a class to the html tag, during the animation time
const startPage = (() => {
const html = document.documentElement,
s = 'start'
html.classList.add(s)
window.addEventListener('load', function() {
setTimeout(() => {
html.classList.remove(s)
}, 1500) // the time must be at least equal to the duration of the CSS animation (personally I put a little more).
})
})()
And for the CSS:
/* the presence of the `.start` class conditions the animation */
.start .leaflet-marker-pane {
animation: animDrop 1s ease;
}
The following code without "iteration-count: 1" was resulting in all line items pulsing after entering, until the last item loaded, even though 'pulse was not being used.
<li class="animated slideInLeft delay-1s animation-iteration-count: 1"><i class="fa fa-credit-card" aria-hidden="true"></i> 1111</li>
<li class="animated slideInRight delay-1-5s animation-iteration-count: 1"><i class="fa fa-university" aria-hidden="true"></i> 222222</li>
<li class="animated lightSpeedIn delay-2s animation-iteration-count: 1"><i class="fa fa-industry" aria-hidden="true"></i> aaaaaa</li>
<li class="animated slideInLeft delay-2-5s animation-iteration-count: 1"><i class="fa fa-key" aria-hidden="true"></i> bbbbb</li>
<li class="animated slideInRight delay-3s animation-iteration-count: 1"><i class="fa fa-thumbs-up" aria-hidden="true"></i> ccccc</li>
So i just found a solution for that:
In the hover animation do this:
animation: hover 1s infinite alternate ease-in-out,splash 1;