Viewing Text Fading

  1. Portal Home
  2. Forum
  3. EverWeb
  4. How do I...?

Text Fading



User: Les C. 10 years ago
I want to fade an image in then fade it out.

I've got it working for fade in, but not out. I thought is was a simple matter of changing the "animation-fill" to "both".

Can anyone tell me why it's not working to fade out?


Thanks,

LC




<style>

.fadeIn {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
-o-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
c-both;
-moz-animation-fill-both;
-o-animation-fill-both;
animation-fill-both;
}

.fadeIn-3s {
-webkit-animation-duration:3s;
-moz-animation-duration:3s;
-o-animation-duration:3s;
animation-duration:3s;
}

.fadeIn-5s {
-webkit-animation-duration:5s;
-moz-animation-duration:5s;
-o-animation-duration:5s;
animation-duration:5s;
}

.fadeIn-Delay-0s {
-webkit-animation-delay:0s;
-moz-animation-delay:0s;
-o-animation-delay:0s;
animation-delay:0s;
}

.fadeIn-Delay-5s {
-webkit-animation-delay:5s;
-moz-animation-delay:5s;
-o-animation-delay:5s;
animation-delay:5s;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

</style>
User: Roddy 10 years ago
The main frustration when working with CSS animations is having to deal with all these vendor prefixes. My answer is to not use them!

RageSW have an excellent app for creating websites using code which I have used for a number of years. WebDesign is now not developed but works fine and can be obtained free.

When conducting daring experiments using WebDesign, you only need to use the -webkit prefix. You can add the others once your project is working. I don't need to support old browsers so I only use the non prefixed selector and the -webkit one anyway.

In your case you have keyframes for fade in but none for fade out. I don't know why you would want to fade an item in and then out - leaving a blank space?

Here's a slightly more adventurous example where the image fades out/in infinitely revealing text below.

Last edit 10 years ago

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 10 years ago
I'm avoiding doing something I don't really want to do so I tried placing one image on top of another for an interesting effect which could be useful with an appropriate choice of images!

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 10 years ago
--Roddy,

I now have a fade code using your template that works!

The issue I am now facing is that it competes with other code I placed in HTLM snippets on the page.

How do I isolate and reformat this code so that it will not affect other code on the page (for example, the nav bar menu we developed)?


Thanks,

LC


<img class="big" src="{!-ASSETSPATH-!}Images/big@2x.png" height="65" width="600" alt="" />

<style type="text/css">

@-webkit-keyframes fadeIn{
0% {opacity: 0;}
38% {opacity: 1;}
76% {opacity: 1;}
100% {opacity: ;}
}
@-moz-keyframes fadeIn{
0% {opacity: 0;}
38% {opacity: 1;}
76% {opacity: 1;}
100% {opacity: ;}
}
@-o-keyframes fadeIn{
0% {opacity: 0;}
38% {opacity: 1;}
76% {opacity: 1;}
100% {opacity: ;}
}
@keyframes fadeIn{
0% {opacity: 0;}
38% {opacity: 1;}
76% {opacity: 1;}
100% {opacity: ;}
}

.big {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
-o-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;

-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-duration:8s;
-moz-animation-duration:8s;
-o-animation-duration:8s;
animation-duration:8s;

-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}

</style>

Last edit 10 years ago
User: Les C. 10 years ago
Can anyone else answer this question?

LC
User: Roddy 10 years ago
Without seeing the rest of you code I would think the most likely cause is your animation name "fadeIn". Try changing all instances of this to something like "imgFade".

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
✔ Best Answer  
User: Les C. 10 years ago
--Roddy

Many thanks. That worked!


LC


Post Reply
You must login or signup to post.