Viewing Fade In of Multiple Elements

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

Fade In of Multiple Elements



User: Les C. 8 years ago
I'm not sure if this is a bug of 1.9.5, but when I paste the following code into separate HTML snippets for multiple elements (changing the element name and fade in times), all of the elements fade in at the same time.

Insight, anyone?


LC



<a href="#TEST">TEST</a>

<style type="text/css">

a {
font-family: "HelveticaNeue", sans-serif;
src: url("{!-ASSETSPATH-!}External%20Files/HelveticaNeue-Thin.ttf");
font-size:48px;

-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s; /* Firefox < 16 */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera < 12.1 */
animation: fadein 3s;
}

@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

a {
color: #333333;
}

a:hover {
color: #FF9900;
}

a:link {
text-decoration: none;
}

</style>
User: Jumbo T. 8 years ago
It's not a bug, it's what you designed.

The style applies to ALL <a> elements.

If every individual link should have its own unique style then you give each element an unique id="name" and a corresponding style :

<style>
#name1 {}
#name2 {}
</style>

<a id="name1" href="test1.html">test1</a>
<a id="name2" href="test2.html">test2</a>

Etc.

With a bit of searching you will find the answer on the internet.

Last edit 8 years ago
User: Les C. 8 years ago
--Jumbo

Thanks for your post.

I've updated the code, but with no change.

Here is a sampling:


<a1 href="#TEST1">TEST</a1>

<style type="text/css">

a1 {



<a2 href="#TEST2">TEST2</a2>

<style type="text/css">

a2 {


What am I missing here?


Thanks,

L C
User: Jumbo T. 8 years ago
a1 and a2 are not elements.

I did provide clear examples.

So, you give each 'a' element a unique 'id' and in the style you replace each 'a' with the name of the 'id'.

As each 'a' element apparently has to be unique, it might also be the case for the 'fadein' style. If so, then each 'id' should also have a unique 'fadein' style.
User: Paul-RAGESW 8 years ago
Quote:
<a1 href="#TEST1">TEST</a1>


This isn't valid HTML.

What you probably want to do is this;

<a class="class1" href="#TEST1">TEST</a>


You can't use a1 or a2 etc... that won't work since they aren't valid HTML code.


<style type="text/css">

a.class1 {

... style information...

}

</style>

Last edit 8 years ago

-------------------------------
Paul
EverWeb Developer
✔ Best Answer  
User: Les C. 8 years ago
--Jumbo, Paul

Thanks, guys. I got it.


L C


Post Reply
You must login or signup to post.