CODEWITHSUNDEEP
cssanimationhtml
James
James

Reputation: 323

CSS Style Linking

Is it possible to use one style for all three of my divs to make it short and simple, and keep the animation working? Any help is much appreciated.

jsFiddle

Upvotes: 0

Views: 76

Answers (3)

Omega
Omega

Reputation: 3038

Do you mean apply the css to all three elements? If so you just need to do this:

.a, .b, .c {
  width: 15px;
  height: 15px;
  background: #dbdbdb;
  border-radius: 50px;
  display: inline-block;
}
.a {animation-delay: 1s;
  animation: fade 1s forwards;}
.b {animation-delay: 2s;
  animation: fade 2s forwards;}
.c {animation-delay: 3s;
  animation: fade 3s forwards;}
@keyframes fade {
0%   {opacity:0;}
50%   {opacity:1;}
100% {opacity:0;}}​

Upvotes: 5

Matthew Layton
Matthew Layton

Reputation: 42270

I doubt it, since your animation attributes are all different, so they will need different classes. but you can certainly shorten your CSS by keeping all of the common attributes in their own class, like so:

.x {
  width: 15px;
  height: 15px;
  background: #dbdbdb;
  border-radius: 50px;
  display: inline-block;
}

.a {

  animation-delay: 1s;
  animation: fade 1s forwards;
}


.b {
  animation-delay: 2s;
  animation: fade 2s forwards;
}


.c {
  animation-delay: 3s;
  animation: fade 3s forwards;
}

@keyframes fade {
0%   {opacity:0;}
50%   {opacity:1;}
100% {opacity:0;}}

Use like so:

<div class="x a"></div>
<div class="x b"></div>
<div class="x c"></div>

Upvotes: 0

frenchie
frenchie

Reputation: 51947

May be something like this jsFiddle:

.a {
  animation-delay: 1s;
  animation: fade 1s forwards;}


.b {
  animation-delay: 2s;
  animation: fade 2s forwards;}


.c {
  animation-delay: 3s;
  animation: fade 3s forwards;}

.d{
  width: 15px;
  height: 15px;
  background: #dbdbdb;
  border-radius: 50px;
  display: inline-block;}

@keyframes fade {
0%   {opacity:0;}
50%   {opacity:1;}
100% {opacity:0;}}​

And then your HTML would look like this:

<div class="a d"></div>
<div class="b d"></div>
<div class="c d"></div>​

Upvotes: 1

Related Questions