Advertisement
8u

marquees css

8u
Aug 20th, 2021
116
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.12 KB | None | 0 0
  1. ​<!DOCTYPE html>
  2. <title>test</title>
  3. <style>
  4. .example1 {
  5.  height: 50px;  
  6.  overflow: hidden;
  7.  position: relative;
  8. }
  9. .example1 h3 {
  10.  font-size: 3em;
  11.  color: limegreen;
  12.  position: absolute;
  13.  width: 100%;
  14.  height: 100%;
  15.  margin: 0;
  16.  line-height: 50px;
  17. text-align: center;
  18.  -moz-transform:translateX(100%);
  19.  -webkit-transform:translateX(100%);    
  20.  transform:translateX(100%);
  21.  
  22.  -moz-animation: example1 15s linear infinite;
  23.  -webkit-animation: example1 15s linear infinite;
  24.  animation: example1 15s linear infinite;
  25. }
  26. @-moz-keyframes example1 {
  27.  0%   { -moz-transform: translateX(100%); }
  28.  100% { -moz-transform: translateX(-100%); }
  29. }
  30. @-webkit-keyframes example1 {
  31.  0%   { -webkit-transform: translateX(100%); }
  32. }
  33. @keyframes example1 {
  34.  0%   {
  35.  -moz-transform: translateX(100%); /* bug fix */
  36.  -webkit-transform: translateX(100%); /* bug fix */
  37.  transform: translateX(100%);      
  38.  }
  39. 100% {
  40.  -moz-transform: translateX(-100%); /* bug fix */
  41.  -webkit-transform: translateX(-100%); /* bug fix */
  42.  transform: translateX(-100%);
  43.  }
  44. }
  45. </style>
  46.  
  47. <div class="example1">
  48. <h3>example!</h3>
  49. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement