Why is deprecated and what is the best alternative?

前端 未结

关注

 6  1223

借酒劲吻你 2020-11-27 04:52

Longer time I\'m curious about HTML tag .

You can find in MDN specification:

Obsolete This feat

6条回答

• 

  暖寄归人 (楼主)

  2020-11-27 05:35

  You just have to define class and attached looping animation once in CSS and use it afterwards everywhere you need. But, as many people said - it's a bit annoying practice, and there is reasone, why this tag is becoming obsolete.

  .example1 {
    height: 50px;	
    overflow: hidden;
    position: relative;
  }
  .example1 h3 {
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 0;
      line-height: 50px;
      text-align: center;
  
      /* Starting position */
         -moz-transform:translateX(100%);
         -webkit-transform:translateX(100%);	
         transform:translateX(100%);
  
   /* Apply animation to this element */	
         -moz-animation: example1 15s linear infinite;
         -webkit-animation: example1 15s linear infinite;
         animation: example1 15s linear infinite;
  }
  
  /* Move it (define the animation) */
        @-moz-keyframes example1 {
         0%   { -moz-transform: translateX(100%); }
         100% { -moz-transform: translateX(-100%); }
        }
        @-webkit-keyframes example1 {
         0%   { -webkit-transform: translateX(100%); }
         100% { -webkit-transform: translateX(-100%); }
        }
        @keyframes example1 {
         0%   { 
         -moz-transform: translateX(100%); /* Firefox bug fix */
         -webkit-transform: translateX(100%); /* Firefox bug fix */
         transform: translateX(100%); 		
         }
         100% { 
         -moz-transform: translateX(-100%); /* Firefox bug fix */
         -webkit-transform: translateX(-100%); /* Firefox bug fix */
         transform: translateX(-100%); 
         }
        }
      

  
     
  Scrolling text... 
  
  0 讨论(0)

  查看其它6个回答
  发布评论:

  提交评论

  ---

  •  加载中...

验证码

 看不清?

提交回复

热议问题