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.
Related
This question already has answers here:
How to have multiple CSS transitions on an element?
(9 answers)
Play multiple CSS animations at the same time
(6 answers)
Closed 1 year ago.
I'd like to apologise upfront for my code and question. I'm a graphic designer but have been editing some html for online digital banners.
Currently I have a colored bar slide in from the left to the right after 2 secs.
This works well using 'animation-name:barAnim'
Then I want that same bar to fade out after 7.5 secs.
However once I add 'animation-name:fadeOut' the bar breaks and only flashes at the 7.5 second mark.
All of this needs to work automatically without any user input.
Please see current code below.
Any help would be really really appreciated.
.col_bar1 {
left: 0px;
top: 412px;
width: 132px;
height: 11px;
background: #5d7773;
opacity: 0;
}
.col_bar1 {
animation-name: barAnim;
-webkit-animation-name: barAnim;
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.col_bar {
animation-name: fadeOut;
-webkit-animation-name: fadeOut;
animation-duration: 0.2s;
-webkit-animation-duration: 0.2s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes barAnim {
0% {
-webkit-transform: translate3d(-130px, 0, 0);
transform: translate3d(-130px, 0, 0);
opacity: 1;
}
100% {
opacity: 1;
-webkit-transform: translate3d(18px, 0, 0);
transform: translate3d(18px, 0, 0);
}
}
#-webkit-keyframes barAnim {
0% {
-webkit-transform: translate3d(-130px, 0, 0);
transform: translate3d(-130px, 0, 0);
opacity: 1;
}
100% {
opacity: 1;
-webkit-transform: translate3d(18px, 0, 0);
transform: translate3d(18px, 0, 0);
/*--start from lhs--*/
}
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="col_bar1"></div>
You can do comma separated animations. I have used the animation shorthand here and split it to multiple lines for readability.
CSS
animation:
barAnim 0.5s ease-out 2s forwards,
fadeOut 0.2s ease-in-out 7.5s forwards;
-webkit-animation:
barAnim 0.5s ease-out 2s forwards,
fadeOut 0.2s ease-in-out 7.5s forwards;
I've set up an animation for a certain div.
.Animation
{
-webkit-animation-fill-mode: both; /*and also -moz, -ms etc. */
animation-fill-mode: both;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes scaleAnimation /*and also -moz, -ms etc. */
{
0%
{
opacity: 0;
-webkit-transform: scale(2);
}
100%
{
opacity: 1;
-webkit-transform: scale(1);
}
}
.ScaleAnimation
{
-webkit-animation-name: scaleAnimation; /*and also -moz, -ms etc. */
animation-name: scaleAnimation;
}
But i want a different custom ease (cubic bezier) for the opacity and another custom ease for the transform. How do I get this to work.
The following didn't work:
transition: opacity 1s ease-in-out;
transition: scale 1s ease-in-out;
So it definitely won't work with a custom ease, cubic-bezier(0.555, -0.130, 0.270, 1.075); for example.
Any thoughts? :)
For transitions, you could specify multiple transitions by comma-separating those.
transition: <duration> <property> <delay> <timing-function>, ....
transition: 1s opacity 1s ease-in-out, 1s scale 1s linear;
If you want to go the animation/keyframe route, then you could create two animation keyframes. One for scale, and the other for opacity. And then comma-separate them in the animation setup for the element.
The property for easing is animation-timing-function. For webkit based browsers (as it seems from your question that you don't mind vendor prefixes), it becomes -webkit-animation-timing-function.
You could set it up like this snippet:
div {
width: 120px; height: 120px;
background-color: red;
display: inline-block;
}
div.d1 {
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 2s, 2s;
-webkit-animation-duration: 2s, 2s;
-webkit-animation-name: scaleAnimation, opacityAnimation;
-webkit-animation-timing-function:
cubic-bezier(0.1, 0.7, 1.0, 0.1), ease-in;
}
div.d2 {
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 2s, 2s;
-webkit-animation-duration: 2s, 2s;
-webkit-animation-name: scaleAnimation, opacityAnimation;
-webkit-animation-timing-function: linear linear;
}
#-webkit-keyframes scaleAnimation {
0% {
-webkit-transform: scale(2);
}
100% {
-webkit-transform: scale(1);
}
}
#-webkit-keyframes opacityAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="d1">D1</div>
<div class="d2">D2</div>
Fiddle: http://jsfiddle.net/abhitalks/3y7pcd1t/1/
.
I want a fadein and fadeout effect in CSS which should not stop (should be continous).
I created one: http://jsfiddle.net/z5UB5/
Code :
CSS:
body { background: #fff; }
#-webkit-keyframes 'blink' {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
.objblink {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: blink;
-webkit-animation-timing-function: ease-in-out;
}
HTML:
<p class="objblink">TEST</p>
But this code is only working in Google Chrome. I want that it should also work in other major browsers.
You can see my modification here jsfiddle, i make your animation definition more short :
-moz-animation: blink 2s ease-in-out infinite normal;
-webkit-animation: blink 2s ease-in-out infinite normal;
animation: blink 2s ease-in-out infinite normal;
Add -moz and #keyframes syntax and removed single quotes from blink.
You can see shorthand syntax of animation at Mozilla Dev Network
If you're open to a jQuery solution, this should do the trick for you:
$(document).ready(function(){
shown = true;
setInterval(function(){
if(shown == true)
$(".objblink").fadeOut();
else
$(".objblink").fadeIn();
shown = !shown;
},500);
});
Here is the JSFiddle
As your latest fiddle, you have declare the animation name with single quote. Remove that one and it will work.
Instead of this
#-moz-keyframes 'blink' {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
Use this
#-moz-keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
DEMO
CSS:
.objblink{
-webkit-animation: myfirst 3s;
animation:myfirst 3s;
}
#keyframes myfirst {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
HTML:
<p class="objblink">TEST<meta http-equiv="refresh" content="3" /></p>
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
I would like to spin my div when I hover on it and as it spin I want to make it bigger like zoom in.
So far I have this:
[html]
div class="myMsg">
<p id="welly" style="color: #009">Welcome to Y3!<br><br><br>Thanks for stopping by!</p>
</div>
[css]
.myMsg {
background: white;
width: 800px;
height : 500px;
margin: 100px auto;
border: 1px solid black;
opactiy: 0.5;
-webkit-transform: rotate(360deg); /* Safari and Chrome */
-webkit-transform: scale(.1,.1) skew(45deg) translateX(-300px);
box-shadow: 0px 0px 200px grey;
}
.myMsg:hover {
opacity: 1;
-webkit-transform: rotate(360deg); /* Safari and Chrome */
-webkit-transform: scale(1,.1 skew(0deg);
box-shadow: 0px 0px 200px grey;
}
so I want it to spin before scaling to regular size
Any help is appreciated
First, to show that it can be done.
Now that that's out of the way, let's get down to the nitty gritty and show you how to do it.
First, you'll want to use animation to animate the properties and get the rotation effect. Sadly, a transition won't be enough since transitioning between 0 and 360 means you aren't going anywhere. So, animate your properties from one to the other on the hover. Your code will end up looking something like this:
#keyframes spin {
from { transform: scale(.1,.1) skew(0deg) rotate(0deg); }
to { transform: scale(1,1) skew(0deg) rotate(360deg); }
}
.myMsg:hover {
animation: spin 1s forwards;
}
The #keyframes defines the animation that will happen, and you want to transform from one set of properties to the final one. Then, you set your :hover to play that animation. The relevant properties for the animation are animation-name, animation-duration, and animation-fill-mode (which say that it should have the same properties as the last frame when it is done animating. Webkit requires prefixes, so you'll want to put those in too.
In addition to this, I also placed a transition: transform 1s; on the .myMsg class so that it would animate back after the mouse moves away. But do note that Webkit doesn't seem to play nice with the interaction between the two, so it is a bit choppy and less than ideal. But, with experimental properties like this, sometimes you get what you get.
Some side notes:
Your CSS isn't cross browser compatible, you should clean it up a bit
You're defining 1 transform property, and then immediately overriding it. All transforms need to go in the same declaration. They can't be combined like that
Define an infinite css animation with keyframes for spinning and switch to it on the hover. Use transition for the size (height/width) properties and change them on hover in css also.
Example: http://jsfiddle.net/6guCd/
div {
margin: 100px;
width: 100px;
height: 100px;
background: #f00;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
transition: all 200ms ease;
}
div:hover {
margin: 50px;
width: 200px;
height: 200px;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}