×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

animated li dots

0
0
 
0
Language: CSS
Posted by: Marosi Dóra
Added: Aug 25, 2017 12:33 PM
Views: 2509
Tags: no tags
  1. ul.animated-list {
  2.     list-style-type: none;
  3. }
  4.     ul.animated-list > li::before {
  5.         content: "";
  6.         display: inline-block;
  7.         margin-right: 10px;
  8.         background: #5EC2E5;
  9.         border-radius: 50%;
  10.         display: inline-block;
  11.         height: 8px;
  12.         width: 8px;
  13.         margin-left: 0px;
  14.         margin-right: 14px;
  15.  
  16.         animation: fadein 1.5s;
  17.         -moz-animation: fadein 1.5s; /* Firefox */
  18.         -webkit-animation: fadein 1.5s; /* Safari and Chrome */
  19.         -o-animation: fadein 1.5s; /* Opera */
  20.     }
  21.    
  22. @keyframes fadein {
  23.     from { opacity:0; }
  24.     to { opacity:1; }
  25. }
  26. @-moz-keyframes fadein { /* Firefox */
  27.     from { opacity:0; }
  28.     to { opacity:1; }
  29. }
  30. @-webkit-keyframes fadein { /* Safari and Chrome */
  31.    from { opacity:0; }
  32.    to { opacity:1; }
  33. }
  34. @-o-keyframes fadein { /* Opera */
  35.    from { opacity:0; }
  36.    to { opacity:1; }
  37. }
  38.  

Write a comment

To post comments, please log in or register.