Is it possible to force an element with an animation property affecting opacity to transition from its current state to another predetermined state on hover?
The null state object is animating between differing opacities:
#thumb {
opacity: .33;
-webkit-animation: pulse 2.7s infinite ease-in-out;
-o-animation: pulse 2.7s infinite ease-in-out;
-ms-animation: pulse 2.7s infinite ease-in-out;
-moz-animation: pulse 2.7s infinite ease-in-out;
animation: pulse 2.7s infinite ease-in-out;
}
#-webkit-keyframes pulse {
0% { opacity: 0.23; }
50% { opacity: 0.42; }
100% { opacity: 0.23; }
}
#keyframes pulse {
0% { opacity: 0.23; }
50% { opacity: .42; }
100% { opacity: .23; }
}
And I would like it ease in to a different image and opacity on hover state:
#thumb:hover {
opacity: 1;
background-image: url(hover.png);
-webkit-animation: initial;
-o-animation: initial;
-ms-animation: initial;
-moz-animation: initial;
animation: initial;
-webkit-transition: .23s ease-in-out;
transition: .23s ease-in-out;
}
I've been able to achieve a direct jump to opacity:1;, but haven't been able to achieve the smooth transition.
A prototype can be found here, on Codepen:
https://codepen.io/anon/pen/oqmMEV
add transition to the #thumb style, you currently only apply it to it's hover style so you will not see a transition
#thumb{
transition: .23s ease-in-out;
}
Related
I want to have a css only animation that fades in and out until hovered when displayed full. I can do both things seperately but not together. The hover element never works. Tried several combinations but here's the 2 seperate parts working:
#keyframes flickerAnimation {
0% { opacity:0.4; }
50% { opacity:0; }
100% { opacity:0.4; }
}
#-o-keyframes flickerAnimation{
0% { opacity:0.4; }
50% { opacity:0; }
100% { opacity:0.4; }
}
#-moz-keyframes flickerAnimation{
0% { opacity:0.4; }
50% { opacity:0; }
100% { opacity:0.4; }
}
#-webkit-keyframes flickerAnimation{
0% { opacity:0.4; }
50% { opacity:0; }
100% { opacity:0.4; }
}
.animate-flicker {
-webkit-animation: flickerAnimation 2s infinite;
-moz-animation: flickerAnimation 2s infinite;
-o-animation: flickerAnimation 2s infinite;
animation: flickerAnimation 2s infinite;
}
/* CSS for hover */
.animate {
opacity: 0.1;
transition: opacity 0.2s ease-in-out;
}
.animate:hover {
opacity: 1.0;
transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
}
#box {
width: 100px;
height: 100px;
background-color: #000;
}
<div id="box" class="animate-flicker animate">
As I commented above you cannot do such thing. As you can read in the spec:
As defined in [CSS3CASCADE], animations override all normal rules
So an idea is to unset the animation on hover:
#keyframes flickerAnimation {
0% { opacity:0.4; }
50% { opacity:0; }
100% { opacity:0.4; }
}
.animate-flicker {
animation: flickerAnimation 2s infinite;
}
/* CSS for hover */
.animate {
height:100px;
background:red;
opacity: 0.1;
transition: opacity 0.2s ease-in-out;
}
.animate:hover {
opacity: 1;
transition: opacity 0.2s ease-in-out;
animation:unset;
}
<div class="animate animate-flicker">
</div>
CSS3 animation is not working for me in Safari (works ok in other browsers), I tried splitting out the shorthand so each property is declared separately eg:
-webkit-animation-name: glow;
-webkit-animation-duration: 2s;
......
But still doesn't work. Any ideas?
.light:after {
content:'';
display:block;
z-index:1;
border-radius: 50%;
width: 15px;
height: 15px;
position:absolute;
cursor:pointer;
background:rgba(64, 61, 51, 1);
-webkit-transition: all 500ms ease-in-out 0s;
-moz-transition: all 500ms ease-in-out 0s;
-o-transition: all 500ms ease-in-out 0s;
transition:all 500ms ease-in-out 0s;
}
.light.turned-on:after {
content:'';
display:block;
z-index:1;
background:rgba(255, 242, 204, 1);
-webkit-transition: all 500ms ease-in-out 0s;
-moz-transition: all 500ms ease-in-out 0s;
-o-transition: all 500ms ease-in-out 0s;
transition:all 500ms ease-in-out 0s;
}
.game-area.won .light:after {
-webkit-animation-name: glow;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: forwards;
-moz-animation: glow 2s ease-in-out infinite alternate;
-o-animation: glow 2s ease-in-out infinite alternate;
animation: glow 2s ease-in-out infinite alternate;
}
#-webkit-keyframes glow {
0% {
background: #FFF2CC;
}
10% {
background: #FFF2CC;
}
30% {
background: #C58FCC;
}
50% {
background: #AE86B2;
}
70% {
background: #B2A57D;
}
90% {
background: #B2FFEB;
}
100% {
background: #B2FFEB;
}
}
Just realized that in Safari 8.0.7 (10600.7.5) you cannot use animation on display: inline elements. Since display is inline-block or any other, animation works.
I hope it will help someone.
I'm trying to set up an image within a div that will slowly appear (opacity from 0 to 1) over 5 seconds. I have this code:
.fadeDivIn {
opacity: 1;
transition: opacity 5s ease-in;
-moz-transition: opacity 5s ease-in;
-webkit-transition: opacity 5s ease-in;
-o-transition: opacity 5s ease-in;
}
but I can't figure out how to trigger it automatically.
I've been doing transitions to other elements with CSS3 keyframes and would ideally like to apply something similar to opacity but have hit a brick wall. Can anyone help please?
Have a look at the following example , you need to use keyframes
div {
background: #333;
width: 200px;
height: 200px;
-webkit-animation: smooth 5s ease-in;
-moz-animation: smooth 5s ease-in;
-o-animation: smooth 5s ease-in;
-ms-animation: smooth 5s ease-in;
animation: smooth 5s ease-in;
}
#-webkit-keyframes smooth {
0% { opacity: 0;}
100% { opacity: 1;}
}
An example : http://jsfiddle.net/zxx8u/1/
http://jsfiddle.net/DerekL/9PfMF/
div{
-webkit-animation: fadein 5s linear 1 normal forwards;
}
#-webkit-keyframes fadein{
from { opacity: 0; }
to { opacity: 1; }
}
You can use jQuery animate instead, very clean and easy to manipulate.
JSFiddle link
<div style="opacity:0;">some text</div>
$("div").animate({opacity: '1'}, 5000);
Something like that works for me:
.chat-messages li{
-webkit-animation: fadein 5s linear 1 normal forwards;
}
#-webkit-keyframes fadein{
0% { opacity: 1;}
90% { opacity: 1;}
100% { opacity: 0;}
}
You can do with simple css3 keyframe animation
demo
<div class="timedelay"></div>
.timedelay {
width: 30px;
height: 30px;
position: absolute;
background-color: red;
-webkit-animation: myanim 5s ease 5s;
}
#-webkit-keyframes myanim {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Playing around with CSS 3 animations but for some reasons, all animations return to their original state after execution.
In this case I'd like the image to remain at scale(1) after animation and my text to oly appear after img animation but stay afterward.
.expanding-spinning {
-webkit-transform: scale(.4);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
animation-duration: 500ms;
}
.expanding-spinning {
-webkit-animation: spin2 1.4s ease-in-out alternate;
animation: spin2 1.4s ease-in-out alternate;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#-webkit-keyframes spin2 {
0% { -webkit-transform: rotate(0deg) scale(.4);}
100% { -webkit-transform: rotate(360deg) scale(1);}
}
#-keyframes spin2 {
0% { transform: rotate(0deg) scale(.4);}
100% { transform: rotate(360deg) scale(1);}
}
#-webkit-keyframes fadeInFromNone {
0% {
display:none;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
.slogan {
display: block;
opacity: 1;
-webkit-animation-duration: 2s;
-webkit-animation-name: fadeInFromNone;
-webkit-animation-delay: 3.5s;
}
Fiddle code
You need to add the rule -webkit-animation-fill-mode: forwards; to your animations.
Also, regarding the text animation: Animate the visibility property instead of display property
FIDDLE
.expanding-spinning {
-webkit-animation: spin2 1.4s ease-in-out;
-moz-animation: spin2 1.4s linear normal;
-o-animation: spin2 1.4s linear;
-ms-animation: spin2 1.4s linear;
animation: spin2 1.4s ease-in-out alternate;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-fill-mode: forwards; /* <--- */
}
#-webkit-keyframes fadeInFromNone {
0% {
visibility:hidden;
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
.slogan {
visibility:hidden;
opacity: 1;
-webkit-animation-duration: 2s;
-webkit-animation-name: fadeInFromNone;
-webkit-animation-delay: 3.4s;
-webkit-animation-fill-mode: forwards; /* <--- */
}
See this article for a nice explanation of all the animation properties
The fill mode. If set to forwards, the last keyframe remains at the
end of the animation,
(from above link)
So I'm trying to animate some text dropping down once its finished animating.
The problem is it just disappears after it's finished, even though I set the opacity to 1# 100%.
/* text animation */
#-webkit-keyframes textAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(-200%);
}
10% {
opacity: 1;
-webkit-transform: translateY(0%);
}
20% {
opacity: 1;
-webkit-transform: translateY(0%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
.text-animation {
z-index: 1000;
width: 100%;
text-align: center;
opacity: 0;
-webkit-animation: textAnimation 2s linear 2s;
-moz-animation: textAnimation 2s linear 2s;
-o-animation: textAnimation 2s linear 2s;
-ms-animation: textAnimation 2s linear 2s;
animation: textAnimation 2s linear 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
}
/* text animation */
I just don't understand what the problem is here...
This worked for me.
If you set the end state in the class and not add a delay.
#-webkit-keyframes textAnimation {
0% { opacity: 0; -webkit-transform: translateY(-200%); }
33% { opacity: 1; -webkit-transform: translateY(-200%); }
100% { opacity: 1; -webkit-transform: translateY(0%); }
}
.text-animation {
color:#fff;
font-size:32px;
width: 100%;
text-align: center;
opacity: 1;
-webkit-animation: textAnimation 3s linear;
-moz-animation: textAnimation 3s linear;
-o-animation: textAnimation 3s linear;
-ms-animation: textAnimation 3s linear;
animation: textAnimation 3s linear;
}
In you .text-animation declaration add this :
-webkit-animation-fill-mode: forwards;
Thanks to it, your animation will stay to the last keyframe state. (here, opacity 0).
You can see the result here : http://codepen.io/joe/pen/CkbcL
Source : https://developer.mozilla.org/en-US/docs/CSS/animation-fill-mode