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>
Related
Im trying to create a blink effect by using 2 images.
I have 2 photos with a person, one with eyes opened and another with eyes closed. How can i make a blinking effect?
I was hoping to make it as real as possible, trying to blink quickly and then keep the eyes opened for 3-5sec and then blink in 1sec.
Found one example that is almost what i need but not quite yet
Would really appreciate some help
.imageswap {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
.imageswap img {
position:absolute;
left:0;
top: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
object-fit: contain;
width: 100%;
height: 100%;
}
#-webkit-keyframes blink {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes blink {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-o-keyframes blink {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
img.openeyeimg {
-webkit-animation: blink 5s;
-webkit-animation-iteration-count: infinite;
-moz-animation: blink 5s;
-moz-animation-iteration-count: infinite;
-o-animation: blink 5s;
-o-animation-iteration-count: infinite;
}
<div class="imageswap">
<!-- NOTE: both images should be have same dimension, look&feel -->
<img src="https://i.stack.imgur.com/yqWK7.jpg" class="closeeyeimg">
<img src="https://i.stack.imgur.com/NgW24.jpg" class="openeyeimg">
</div>
So I have a grid of elements and I have set them to fade in one after the other on page load.
So they have a 0.2s delay from one element to the next fading in from opacity 0 to opacity 1.
I then want images in these elements to grow when there grid section is highlighted, but my animation-fill-mode is preventing this.
Any work arounds?
//Expand when hover over.
.main-image {
transition: transform .2s ease-in-out;
}
#portfolio:hover #portfolio-image {
transform: scale(1.1);
}
// Fade in with delay
#keyframes fadeInFromAbove {
0% {
transform: translateY(-30%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
#portfolio .main-image {
opacity: 0;
animation: 0.5s ease-out 0.2s 1 fadeInFromAbove;
animation-fill-mode: forwards;
}
HTML formatting:
<div id='portfolio' class='main-block'>
<div id='portfolio-image' class='main-image'></div>
</div>
Use two animations like below:
.main-image {
transition: transform .5s ease-in-out;
height: 50px;
margin: 10px;
background: red;
}
#portfolio:hover #portfolio-image {
transform: scale(1.1);
}
#keyframes fade {
100% {
opacity: 1;
}
}
#keyframes move {
0% {
transform: translateY(-30%);
}
}
#portfolio .main-image {
opacity: 0;
animation:
0.5s ease-out 0.2s fade forwards, /* forwards only for opacity */
0.5s ease-out 0.2s move;
}
<div id='portfolio' class='main-block'>
<div id='portfolio-image' class='main-image'></div>
</div>
I have a simple CSS based loading animation that should iterate with infinite. However, the animation only runs once and stops. I'm surely missing something trivial but can't spot the error.
A related question, to shorten the CSS, can I join all the vendor specific selectors into one block, as in the following example?
#keyframes loading-dots,
#-webkit-keyframes loading-dots,
#-[other vendors...]
{
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
Any help is greatly appreciated.
Here is a snippet:
.loading-dots span {
display: inline-block;
height: 9px;
width: 9px;
background: #abb3b8;
-webkit-animation: loading-dots 0.8s infinite;
-moz-animation: loading-dots 0.8s infinite;
-ms-animation: loading-dots 0.8s infinite;
animation: loading-dots 0.8s infinite;
}
.loading-dots span:nth-child(2) {
visibility: hidden;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
visibility: hidden;
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#keyframes loading-dots {
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
#-webkit-keyframes loading-dots {
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
#-moz-keyframes loading-dots {
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
#-ms-keyframes loading-dots {
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
</div>
I suggest using opacity with any visibility animation check the code below with opacity .. because animating visibility or display is not a good idea as they are a 1/0 values that can't be animated
.loading-dots span {
display: inline-block;
opacity:0;
height: 9px;
width: 9px;
background: #abb3b8;
-webkit-animation: loading-dots 0.8s infinite;
-moz-animation: loading-dots 0.8s infinite;
-ms-animation: loading-dots 0.8s infinite;
animation: loading-dots 0.8s infinite;
}
.loading-dots span:nth-child(2) {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#keyframes loading-dots {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes loading-dots {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes loading-dots {
0%{
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes loading-dots {
0% {
opacity:0;
},
100% {
opacity:1;
}
}
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
</div>
I can make an element with an opacity of zero fade in by changing its class to .elementToFadeInAndOut with the following css:
.elementToFadeInAndOut {
opacity: 1;
transition: opacity 2s linear;
}
Is there a way I can make the element fade out after it fades in by editing css for this same class?
Use css #keyframes
.elementToFadeInAndOut {
opacity: 1;
animation: fade 2s linear;
}
#keyframes fade {
0%,100% { opacity: 0 }
50% { opacity: 1 }
}
here is a DEMO
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
}
#-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
#keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
<div class=elementToFadeInAndOut></div>
Reading: Using CSS animations
You can clean the code by doing this:
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
opacity: 0;
}
#-webkit-keyframes fadeinout {
50% { opacity: 1; }
}
#keyframes fadeinout {
50% { opacity: 1; }
}
<div class=elementToFadeInAndOut></div>
If you need a single fadeIn/Out without an explicit user action (like a mouseover/mouseout) you may use a CSS3 animation: http://codepen.io/anon/pen/bdEpwW
.elementToFadeInAndOut {
animation: fadeInOut 4s linear 1 forwards;
}
#keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
By setting animation-fill-mode: forwards the animation will retain its last keyframe
By setting animation-iteration-count: 1 the animation will run just once (change this value if you need to repeat the effect more than once)
I found this link to be useful: css-tricks fade-in fade-out css.
Here's a summary of the csstricks post:
CSS classes:
.m-fadeOut {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 300ms, opacity 300ms;
}
.m-fadeIn {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 300ms;
}
In React:
toggle(){
if(true condition){
this.setState({toggleClass: "m-fadeIn"});
}else{
this.setState({toggleClass: "m-fadeOut"});
}
}
render(){
return (<div className={this.state.toggleClass}>Element to be toggled</div>)
}
Try creating a keyframes animation for the opacity attribute of your element:
<style>
p {
animation-name: example;
animation-duration: 2s;
}
#keyframes example {
from {opacity: 2;}
to {opacity: 0;}
}
</style>
<div>
<p>[Element to fade]</p>
</div>
(You can also set the exact percentages of animations to make it fade in/out. For example, set 0% to 2 opacity, 50% to 0 opacity, and 100% to 2 opacity. A good source for this method is W3Schools # https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation2 .)
Try this:
#keyframes animationName {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
#-o-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
#-moz-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
#-webkit-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
.elementToFadeInAndOut {
-webkit-animation: animationName 5s infinite;
-moz-animation: animationName 5s infinite;
-o-animation: animationName 5s infinite;
animation: animationName 5s infinite;
}
Can you please take a look at this Demo and let me know why the keyframe animation not working>
<div class="showbox"></div>
<style>
.showbox {
height:15px;
width:15px;
background:red;
border-radius: 25px;
-webkit-transition:1s ease-in-out;
-moz-transition:1s ease-in-out;
-o-transition:1s ease-in-out;
transition:1s ease-in-out -webkit-animation-name: pulse;
-webkit-animation-duration: 1000ms;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform:scale(1);
transform:scale(1);
}
25% {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
50% {
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
75% {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
100% {
-webkit-transform:scale(1);
transform:scale(1);
}
}
</style>
Thanks
Simplest variant http://jsfiddle.net/darLuges/2/
.showbox {
height:15px;
width:15px;
background:red;
border-radius: 25px;
transform-origin:50% 50%;
transform:scale(1);
animation: pulse 0.6s infinite linear alternate;
}
#keyframes pulse {
to {transform:scale(1.3);}
}
<div class="showbox"></div>
(than add back the xBrowser -vendor- prefixes)