How does one make a div/input flash or 'pulse'? Say for example a form field has an invalid value entered?
With CSS3 something like on this page, you can add the pulsing effect to a class called error:
#-webkit-keyframes error {
from {
-webkit-transform: scale(1.0);
opacity: 0.75;
}
50% {
-webkit-transform: scale(1.2);
opacity: 1.0;
}
to {
-webkit-transform: scale(1.0);
opacity: 0.75;
}
}
.error {
opacity: 0.75;
-webkit-animation-name: error;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: 10;
}
A YouTube demo if you're not on Safari, Chrome or another browser the above works on. The demo makes use of :hover to start the animation.
You can add the above class to invalid entries.
For example, this is very simple with the jQuery validation plugin:
$(function() {
$("form").validate();
});
jsFiddle example
Related
Im working with animate.css for a bouncein-out simple animation for a login slide.
http://www.freelancing.com.br/
This is the trigger:
$('body').on('click', '.actions .login', function(){
$('#login').removeClass('bounceOutUp');
$('.overlay').fadeIn(300);
$('#login').addClass('bounceInDown');
});
$('body').on('click', '#login .close', function(){
$('#login').removeClass('bounceInDown');
$('#login').addClass('bounceOutUp');
});
and the basic css markup:
.animated {
-moz-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-transition: all 0.3s ease-in-out;
}
#-moz-keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(0);
}
}
#-moz-keyframes bounceOutUp {
0% {
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(20px);
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
}
I really dont know why this is rolling on at all. The markup is just the same as chrome, and it rolls just fine there.
Unlike Chrome, the transition property is applied to properties inside an animation in Firefox.
Remove the [-moz-]transition property and your CSS3 animation will work fine in both Firefox and Chrome.
ps. You're missing -moz-box-sizing: border-box; in some of your elements.
I have a script that as soon as the user starts to scroll a box shadow is added that looks very nice. However, this box shadow is added instantly. I would prefer that it fade in using CSS 3. I have tried creating keyframes that change the opacity from 0 - 1 over 1 second but that doesn't work.
Here is the script I am using:
$(function() {
$(window).scroll(function() {
var top_offset = $(window).scrollTop();
if (top_offset) {
$('.top_head_separator').addClass('fixed-top fade-in');
}
});
CSS:
.fixed-top {
background:#FFFFFF;
box-shadow: 0 7px 15px 4px rgba(0,0,0,0.38);
height: 90px;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
#keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeIn;
}
How do I have the box shadow fade in?
Note: I omitted vendor prefixes in this question but they are in my code.
I think you just have a spelling mistake and a syntax error or two, otherwise you're fine. Two things:
Close both functions in your jQuery.
Your CSS mentions fadeIn, but jQuery had fade-in
Here's the new, fixed jQuery code:
$(function() {
$(window).scroll(function() {
var top_offset = $(window).scrollTop();
if (top_offset) {
$('.top_head_separator').addClass('fixed-top fadeIn'); // <<<< "fadeIn"
}
}); // <<<< ADDED
});
See this -webkit- demo for a working example.
I am trying to find a transitioning CSS code to transition two images. I want the first image to be shown for 4 seconds then fade into a second image which will stay the same for for seconds then fade back to the first. Right now I am not using CSS and am finding most CSS tutorials are formatted for an on :hoover. I want my image to constantly change without a :hover being needed.
The flexi ad coding I am using now is a ans works fine in waterfox and explorer but you can see the images being loaded in chrome with a bad flicker.
Here's the example of what I am working with. The script I am using now is actually transitioning through 30 images i made some that fade from one to the next and thats why it looks like it fades. I would like some kind of CSS that will only require 2 images and fade one to the next every 4 seconds.
http://www.vulgarmediaproductions.com/walt/walt.shtml
You need to use keyframe animations for this - DEMO
HTML:
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2012-10-a-web.jpg'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-45-a-web.jpg'>
CSS:
img {
position: absolute;
width : 320px;
height: 180px;
}
img:last-child { animation: fader 4s infinite alternate; }
#keyframes fader { to { opacity: 0; } }
EDIT
If your images have transparency, then you'll need to animate the opacity for both of them, not just for the one on top. Like this - DEMO
img {
opacity: 0;
position: absolute;
width : 256px;
height: 256px;
}
img:first-child { animation: fadein 8s infinite alternate; }
img:last-child { opacity: 1; animation: fadeout 8s infinite alternate; }
#keyframes fadein { 50% { opacity: 1; } }
#keyframes fadeout { 50% { opacity: 0; } }
Also, keep in mind that you'll have to use prefixes (I did not use any since dabblet includes -prefix-free and it's easier to highlight the idea that way):
img:first-child {
-webkit-animation: fadein 8s infinite alternate; /* Chrome, Safari, Android, Blackberry */
-moz-animation: fadein 8s infinite alternate; /* FF, FF for Android */
-o-animation: fadein 8s infinite alternate; /* Opera 12 */
animation: fadein 8s infinite alternate; /* IE 10, FF 16+, Opera 12.5 */
}
#-webkit-keyframes fadein { 50% { opacity: 1; } }
#-moz-keyframes fadein { 50% { opacity: 1; } }
#-o-keyframes fadein { 50% { opacity: 1; } }
#keyframes fadein { 50% { opacity: 1; } }
/* same for the other set (fadeout) */
Not tested and just written on the fly, but should work.
If you have any problems getting it to work, let me know...
You may want to debug this using FireBug for Firefox. It helps you alot playing arround with CSS, HTML and JavaScript.
CSS3:
.slideShow
{
position: absolute;
left: 0;
top: 0;
-webkit-transition: all 200ms ease-in-out 0s;
-moz-transition: all 200ms ease-in-out 0s;
-ie-transition: all 200ms ease-in-out 0s;
-o-transition: all 200ms ease-in-out 0s;
transition: all 200ms ease-in-out 0s;
}
.slideShowWrapper { position:relative; }
HTML:
<div class="slideShowWrapper" id="mySlideShow" style="width:400px;height:300px;">
<div class="slideShow" style="opacity:1.0"> (image 1 goes here) </div>
<div class="slideShow" style="opacity:0.0"> (image . goes here) </div>
<div class="slideShow" style="opacity:0.0"> (image . goes here) </div>
<div class="slideShow" style="opacity:0.0"> (image N goes here) </div>
</div>
JS:
function ssCycle(_obj)
{
var _oList=_obj.getElementsByTagName('div');
for (var _trace=0;_trace<oList.length;_trace++)
{
if(_oList[_trace].getAttribute('style').indexOf('opacity:1.0')>0)
{
_oList[_trace].style.opacity='0.0';
try
{
_oList[(_trace+1)].style.opacity='1.0';
}
catch(_e)
{
_oList[0].style.opacity='1.0';
}
}
}
};
(function(_src){ void(var tmrFunc = "void(ssCycle(document.getElementById("+_src+"));";setInterval(tmrFunc,4000);}).call('mySlideShow');
I've created a simple bounce animation which i'm applying to the :hover state of an element:
#keyframes bounce {
0% {
top: 0;
animation-timing-function: ease-out;
}
17% {
top: 15px;
animation-timing-function: ease-in;
}
34% {
top: 0;
animation-timing-function: ease-out;
}
51% {
top: 8px;
animation-timing-function: ease-in;
}
68% {
top: 0px;
animation-timing-function: ease-out;
}
85% {
top: 3px;
animation-timing-function: ease-in;
}
100% {
top: 0;
}
}
.box:hover {
animation: bounce 1s;
}
The animation works fine, with the exception that when you remove your cursor from the element it abruptly stops. Is there anyway to force it to continue the set number of iterations even if the mouse has exited? Basically what I'm looking for here is an animation triggered by the :hover state. I'm not looking for a javascript solution. I haven't seen anyway to do this in the spec, but maybe there's an obvious solution I've missed here?
Here's a fiddle to play with: http://jsfiddle.net/dwick/vFtfF/
I'm afraid that the only way to solve this is with a bit of javascript, you must add the animation as a class and then remove it when the animation finishes.
$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
$(this).removeClass("animated")
})
$(".box").hover(function(){
$(this).addClass("animated");
})
http://jsfiddle.net/u7vXT/
I created a JsFiddle with this answer from the same post https://stackoverflow.com/a/7697786/8335898 using pure Javascript if anyone wants to use it.
const elements = document.getElementsByClassName('box');
for (let i = 0; i <= elements.length; i++) {
elements[i].addEventListener('animationend', function(e) {
elements[i].classList.remove('animated');
});
elements[i].addEventListener('mouseover', function(e) {
elements[i].classList.add('animated')
})
}
Same answer with #methodofaction but for anyone using React:
import React, { useState } from 'react';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
export default function Icon({ icon }) {
const [animated, setAnimated] = useState(false);
return (
<div
onMouseEnter={() => setAnimated(() => true)}
onAnimationEnd={() => setAnimated(() => false)}
>
<FontAwesomeIcon icon={icon} className={animated ? 'animated' : ''} />
</div>
);
}
just to improve Duopixel answer, when runnig infinite animitation I have to do:
$(".box").css("animation-iteration-count", "1");
$(".box").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
$(this).removeClass("animated")
})
$(".box").hover(function(){
$(".box").css("animation-iteration-count", "infinite");
$(this).addClass("animated");
})
This just not abruptly end the animation.
A simple trick will do the job :
-webkit-animation:swing 3600ms ease-in-out 6000s;
-webkit-transform-origin:top;
Set the 'delay' with an high value on the element (not :hover).
From: Stackoverflow - Robert McKee
This won't work in all situations, and won't work for OP without some compromises but I solved this problem by adding an animation to the :not(:hover) selector:
#keyframes stopBounce {
0% {
top: 15px;
}
100% {
top: 0px;
}
}
#keyframes bounce {
ops: bounce code
}
.box{
top: 0px;
transition: top 250ms 1000ms ease-in-out,
}
.box:hover{
animation-name: bounce;
animation-fill-mode: both;
animation-duration: 250ms;
}
.box:not(:hover){
animation-name: stopBounce;
animation-duration: 250ms;
animation-delay: 1000ms;
animation-fill-mode: both;
}
So, what this doesn't do is allow the animation to continue all the way through. As far as I can tell a pure CSS solution to that is impossible. What it does do is allow it to smoothly transition back to it's starting position. The trick is having two selectors, only one of which can be active at any one time.
What this allows us to do is have an animation that plays when the user hovers, and a separate animation that plays whenever the user stops hovering. Since both of these animations can be controlled, it allows us to ensure that the transition between them is smooth.
Like I said, this doesn't fully solve the problem, but it doesn't use JavaScript and will keep things smooth.
CSS might help in some cases but not all, below is the code that will animate letter spacing on both hover and after hover.
h1
{
-webkit-transition:all 0.3s ease;
}
h1:hover
{
-webkit-transition:all 0.3s ease;
letter-spacing:3px;
}
<body>
<h1>Hello</h1>
</body>
I have a div with an image in it. At the moment I use CSS3 animation to fade it off, but the performance is terrible.
I am pretty sure I should be using transitions. Problem is I cannot find one example that isn't triggered by a hover.
How can I make it so that when the page is loaded, after a delay of 2 seconds, the image/div fades in from 0%?
At the moment, as I said with animation, I have:
#-webkit-keyframes fadetime {
from {
opacity: 0;
}
50% {
opacity: 0;
}
to {
opacity: 1;
}
}
Any ideas? Thank you.
#-webkit-keyframes FadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
.object {
-webkit-animation-name: FadeIn;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 3s;
}
Using jQuery is probably a better way to go:
<script type="text/javascript">
$(document).ready(function () {
$('#mainContent').hide();
$('#mainContent').delay(2000).fadeIn(500);
});
</script>
Where #mainContent is the div you want to fade in