Entropia:Sandkasten:GPN16 test:Stylesheet

aus dem Wiki des Entropia e.V., CCC Karlsruhe
Version vom 19. April 2016, 17:31 Uhr von Madonius (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „@-webkit-keyframes fadeIcon { 0% { opacity:0;} 40% { opacity:0;} 50% { opacity:1;} 60% { opacity:0;} 100% { opacity:0;} } @-moz-keyfra…“)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu:Navigation, Suche

@-webkit-keyframes fadeIcon {

   0%   { opacity:0;}
   40%  { opacity:0;}
   50%  { opacity:1;}
   60%  { opacity:0;}
   100% { opacity:0;}

} @-moz-keyframes fadeIcon {

   0%   { opacity:0;}
   40%  { opacity:0;}
   50%  { opacity:1;}
   60%  { opacity:0;}
   100% { opacity:0;}

} @keyframes fadeIcon {

   0%   { opacity:0;}
   40%  { opacity:0;}
   50%  { opacity:1;}
   60%  { opacity:0;}
   100% { opacity:0;}

}

div.NavFrame div.NavPic div.icon {

 -webkit-animation:fadeIcon linear infinite;
 -moz-animation:fadeIcon linear infinite;
 animation:fadeIcon linear infinite;
 -webkit-animation-duration:4s;
 -moz-animation-duration:4s;
 animation-duration:4s;

}

div.NavFrame div.NavPic div.icon:nth-child(1n+0) {

   -webkit-animation-delay: 0s;
   animation-delay: 0s;
   background: url('/images/1/10/GPN16-Logo1_smal.svg') no-repeat left top;

} div.NavFrame div.NavPic div.icon:nth-child(2n+0) {

   -webkit-animation-delay: 1s;
   animation-delay: 1s;
   background: url('/images/b/ba/GPN16-Logo2_smal.svg') no-repeat left top;

} div.NavFrame div.NavPic div.icon:nth-child(3n+0) {

   -webkit-animation-delay: 2s;
   animation-delay: 2s;
   background: url('/images/2/2c/GPN16-Logo3_smal.svg') no-repeat left top;

} div.NavFrame div.NavPic div.icon:nth-child(4n+0) {

   -webkit-animation-delay: 3s;
   animation-delay: 3s;
   background: url('/images/e/ef/GPN16-Logo4_smal.svg') no-repeat left top;

}

div.NavFrame div.NavPic {

       background-color: #1486cc;
       background-image: url('/images/0/00/GPN16-Background_smal.svg');
       height: 80px;
       width: 80px;

} div.NavFrame div.NavPic div.icon {

       position: absolute;
       opacity: 0;
       height: 80px;
       width: 80px;
       background-size: 100% auto;

}