I'm trying to show a notification on button click. The button click actually checks for email validation. I know to show a div with content with the error message. However, I would like to fade out the error message, lets say after 5 seconds . I would like to achieve it using CSS. Below is my attempt, it just hides everything. Please advise.
#signup-response{
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #FF0000;
margin-top: 20px;
-webkit-transition: opacity 5s ease-in-out;
-moz-transition: opacity 35s ease-in-out;
-ms-transition: opacity 5s ease-in-out;
-o-transition: opacity 5s ease-in-out;
opacity: 0;
}
You can use animation example.
Set the animation-delay to the time you want. Make sure you use animation-fill-mode: forwards to stop the animation.
#signup-response{
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #FF0000;
margin-top: 20px;
animation:signup-response 0.5s 1;
-webkit-animation:signup-response 0.5s 1;
animation-fill-mode: forwards;
animation-delay:2s;
-webkit-animation-delay:1s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
}
#keyframes signup-response{
from {opacity :1;}
to {opacity :0;}
}
#-webkit-keyframes signup-response{
from {opacity :1;}
to {opacity :0;}
}
Using css3 keyframe animation:
(You'll probably want to add -webkit- -moz-, -ms-, and -o- prefixes on the animation and animation-delay properties inside .error-message and on the keyframes to support older browsers.)
.error-message {
animation: fadeOut 2s forwards;
animation-delay: 5s;
background: red;
color: white;
padding: 10px;
text-align: center;
}
#keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}
<div class="error-message">
<p>Some random text</p>
</div>
cross browser hack (instead of using css3 animation keyframes):
transition-timing-function: cubic-bezier(1,1,1.0,0);}
-webkit-transition-timing-function: cubic-bezier(1,1,1.0,0);
http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
Related
I have a logo of an iceberg, which I am trying to simulate a floating animation with by increasing and decreasing the top margin. I am using the following css for this:
img {
height: 60px;
padding: 5px;
-webkit-animation: logofloat 1s ease-in-out infinite alternate;
-moz-animation: logofloat 1s ease-in-out infinite alternate;
animation: logofloat 1s ease-in-out infinite alternate;
}
#keyframes logofloat {
from {
margin-top: 0px; margin-top: 5px;
}
to {
margin-top: 5px; margin-top: 10px;
}
}
Here is what that currently looks like: https://gyazo.com/bbd8991a3e9a42148bb7677b85d0db3d
The animation is a bit choppy, is there anything that I can do to make it smoother?
Use transform: translateY instead of margin, so the animation will take benefit of the GPU and use will-change: transform so the browser knows in advance what properties are going to change.
img {
height: 100px;
will-change: transform;
animation: logofloat 1s ease-in-out infinite alternate;
}
#keyframes logofloat {
from {
transform: translateY(0);
}
to {
transform: translateY(10px);
}
}
<img src="https://i.stack.imgur.com/UJ3pb.jpg" />
Finally, vendor prefixes are no longer necessary unless you need to support really old browser versions.
I'm trying to do a simple animation but the result isn't smooth.
.animate {
animation: infinity 1.5s steps(27) forwards;
}
#keyframes infinity {
100% {
background-position: -5778px;
}
}
<div class="animate" style="width:214px; height:32px; background-image:url(https://i.hizliresim.com/gOggGZ.png); background-repeat: no-repeat;"></div>
So is there any way to remove that shaking?
We can't see the snippet, please fix it so we can help better.
On a side note, if the animation is not smooth, maybe transition will help. You can't give the number of steps as 'steps(3)', there is a CSS property
animation-iteration-count: 3;
which determines how many times it should be repeated after completing one full loop. You can use 'infinite' too.
Also, you should maybe also define the 0% for better control over the element animation you want.
.animate {
animation: infinity 1.5s linear forwards; /*add transition here */
animation-iteration-count: 3;
}
/* or on the element itself */
.elementclassname {
-moz-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
#keyframes infinity {
0% {
background-position: 0px;
}
100% {
background-position: -300px;
}
}
Changing animation-timing-function to ease-in-out gives smooth animation.
.animate {
animation: infinity 1.5s ease-in-out forwards;
}
#keyframes infinity {
0% {
background-position: 0px;
}
100% {
background-position: -300px;
}
}
<div class="animate" style="width:200px; height:100px; background-image:url(https://preview.ibb.co/k2cREc/banner_about.jpg); background-repeat: no-repeat; -webkit-transform: rotate(-8deg);-moz-transform: rotate(-8deg);-o-transform: rotate(-8deg);-ms-transform: rotate(-8deg); transform: rotate(-8deg);"></div>
You are explicitly asking CSS to make an animation with 3 steps, this is why your animation isn't smooth.
Simply remove the steps(3) part and you'll be good!
.animate {
animation: infinity 1.5s forwards;
width: 100px;
height: 50px;
background: url('https://i.imgur.com/M5XHVHu.jpg');
background-repeat: no-repeat;
transform: rotate(-8deg);
}
#keyframes infinity {
100% {
background-position: -300px;
}
}
<div class="animate"></div>
Looked around and haven't found anything similar - finding this really weird.
I have a simple animation on load for a menu at the bottom of a page, sliding the text up a couple seconds after loading (to allow other animations to finish). This works absolutely fine on firefox, IE, android browser and chrome for android. But when I test it on desktop Chrome (44), it doesn't quite work.
What happens is when I load the page for the first time (cleared cache/incognito) the animation will work. But every subsequent time I load the page, it will break - and I have no idea why.
This only happens when I wrap one of the spans in the div inside a link.
The animation is as so:
#-webkit-keyframes fadeInBottom {
0% {
opacity: 0;
-webkit-transform: translateY(15vw);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
#-moz-keyframes fadeInBottom {
0% {
opacity: 0;
-moz-transform: translateY(15vw);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
#keyframes fadeInBottom {
0% {
opacity: 0;
transform: translateY(15vw);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
the css for the spans:
.basePanel{
z-index:999;
height: 5vw;
width: 100vw;
position:absolute;
bottom:0;
font-size:4vw;
color:#f1f8f0;
display:inline-block;
font-family:coda, courier;
-webkit-animation-name: fadeInBottom;
-webkit-animation-fill-mode: both;
-webkit-animation-duration: 1.3s;
-webkit-animation-delay:1.8s;
-moz-animation-name: fadeInBottom;
-moz-animation-fill-mode: both;
-moz-animation-duration: 1.3s;
-moz-animation-delay:1.8s;
animation-name: fadeInBottom;
animation-fill-mode: both;
animation-duration: 1.3s;
animation-delay:1.8s;
}
#contact{
padding-top: 15vh;
position:relative;
font-family:coda, courier;
text-align:left;
color:#f1f8f0;
font-size:6vw;
}
.button{
position:relative;
text-align:center;
width:32.1vw;
-webkit-transition: background-color 0.3s linear;
-moz-transition: background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
-ms-transition: background-color 0.3s linear;
transition: background-color 0.3s linear;
}
.button:hover{
background-color: #252c24;
-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;
-ms-transition: background-color 0.5s linear;
transition: background-color 0.5s linear;
}
.centre{
width:32.15vw;
}
and relevant html:
<div class="basePanel">
<span class="left basePanel button">About</span>
<span class="centre basePanel button">Portfolio</span>
<a href="contact">
<span class="right basePanel button">Contact</span>
</a>
</div>
Here is a fiddle with the relevant HTML and CSS: https://jsfiddle.net/bqLLqbwc/
Annoyingly, this actually works in Chrome. To see the broken page, here is the actual web page I am working on: http://www.devox.org
I've tested on two computers, one running windows 7 and the other running ubuntu 14.04, both running chrome 44.
So I ended up restructuring the html a bit.
While it feels like wrapping a <div> tag in an <a> tag would be easier, it just doesn't seem to work in Chrome. Maybe it breaks some legacy bug from pre HTML5 days. I have no idea.
So instead I wrap an <a> tag in a <span> tag and change the css to make it fill the div and remove any decoration:
html:
<span class="right basePanel button">Contact</span>
css:
.button a{
color: #f1f8f0;
display:block;
height: 100%;
width: 100%;
text-decoration:none;
}
.button a:visited{color:#f1f8f0;}
Which seems to work fine.
I have a delayed animation on page load with CSS3. Everything works fine, but after the animation is done, the DIV goes back into visibility: hidden.
.content-left {
margin-left: 100px;
margin-top: 32px;
position: absolute;
z-index: 1;
visibility: hidden;
-webkit-animation: fadein 1s 2s ease; /* Safari and Chrome */
animation: fadein 1s 2s ease;
}
#keyframes fadein {
from { height: 0px; }
to { height: 421px; visibility: visible;} }
#-webkit-keyframes fadein {
from { height: 0px; }
to { height: 421px; visibility: visible;}}
That happens because once the animation is done, it reverts back to the original styling.
you can however, direct your animation to keep the last frame of the animation after its done playing, its called Animation Fill Mode
animation-fill-mode: forwards; - will keep the last frame of the animation.
animation-fill-mode: backwards; - will keep the first frame of the animation.
or you can add forwards to your animation declaration:
-webkit-animation: fadein 1s 2s ease forwards; /* Safari and Chrome */
animation: fadein 1s 2s ease forwards;
set animation-fill-mode: forwards so it will not go back to first stage of the animation.
It works in Chrome. I have no idea why Firefox is making such problems. Text should fade in. It should also change it's color on mouse hover.
Unfortunately Firefox does something else - it forces the text to fade in and out every time I hover my cursor over it.
http://jsfiddle.net/76mfr/2/
CSS:
.sangwinik{
opacity: 0;
transition: 500ms ease-in-out;
-moz-animation-name: fadein;
-moz-animation-fill-mode:forwards;
-moz-animation-iteration-count: 1;
-moz-animation-duration: 1.5s;
}
#-moz-keyframes fadein {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.sangwinik:hover{
color: #55C1E5;
text-shadow: 0 0 3px #00FFFF;
}
HTML:
<p class="sangwinik">Sangwinik</p>
Instead of using all, specify only the properties you want to transition (color and text-shadow):
.sangwinik {
opacity: 0;
transition: color 500ms ease-in-out,
text-shadow 500ms ease-in-out;
-moz-animation-name: fadein;
-moz-animation-fill-mode:forwards;
-moz-animation-iteration-count: 1;
-moz-animation-duration: 1.5s;
}
.sangwinik:hover {
color: #55C1E5;
text-shadow: 0 0 3px #00FFFF;
}
Updated fiddle (I think opacity was being transitioned as well)
Since Firefox 16, the browser expects the W3C property without the -moz prefix; have a look at some more info.
This should work:
.sangwinik{
opacity: 0;
transition: 500ms ease-in-out;
animation-name: fadein;
animation-fill-mode:forwards;
animation-iteration-count: 1;
animation-duration: 1.5s;
}
#keyframes fadein {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.sangwinik:hover{
color: #55C1E5;
text-shadow: 0 0 3px #00FFFF;
}
Note that is always good to also include the properties without the vendor prefixes (-moz, -webkit), as they will surely be droped in future versions.