Animate text fill from left to right

问题:

I wanted to animate a the text fill with CSS. The Text should be filled with color from left to right.

this is my CSS:

.box-with-text {     background-image: -webkit-linear-gradient(right, crimson 50%, white 50%);     background-repeat: repeat;     background-position: 0 0;     background-size: 200% 100%;     -webkit-text-fill-color: transparent;     -webkit-background-clip: text;     -webkit-animation: stripes normal forwards ease-in-out;     animation: stripes 2s normal forwards ease-in-out; } 

Now only the first letter is color-filled.

here is the fiddle

回答1:

you may also take a look at flex (for centering things) and mix-blend-mode, so it can be avalaible also for Firefox:

.box-with-text {   text-transform: uppercase;   font: bold 26vmax/.8 Open Sans, Impact;   background: black;   display: table;   color: white;   mix-blend-mode: multiply }  @-webkit-keyframes stripes {   to {     background-size:100% 100%;   } }  @keyframes stripes {   to {     background-size:100% 100%;   } }  html {   display: -webkit-box;   display: -webkit-flex;   display: -ms-flexbox;   display: flex;   -webkit-box-align:center;   -webkit-align-items:center;       -ms-flex-align:center;           align-items:center;   height: 100%;   background: black; }  body {   margin: auto;   background: -webkit-linear-gradient( crimson , crimson) turquoise no-repeat 0 0;   background: linear-gradient( crimson , crimson) turquoise no-repeat 0 0;   background-size: 0 100%;   -webkit-animation: stripes 2s linear infinite;           animation: stripes 2s linear infinite; }

   Text 

http://codepen.io/gc-nomade/pen/XKNKzd

回答2:

/* Main styles */ @import url(http://fonts.googleapis.com/css?family=Open+Sans:800);  .box-with-text {   background-image: -webkit-linear-gradient(left, crimson 50%, white 50%);   background-repeat: repeat;   background-position: 0 0;   background-size: 100% 200px;   -webkit-text-fill-color: transparent;   -webkit-background-clip: text;   -webkit-animation: stripes 2s linear infinite;   animation: stripes 2s linear infinite; }  @-webkit-keyframes stripes {   100% {     background-position: 0 -50px;   } }  @keyframes stripes {   100% {     background-position: 385px 0;   } } /* Other stuff */ body {   overflow: hidden;   background: #000;   color: #FFF; }  .box-with-text {   position: absolute;   top: 50%;   left: 50%;   white-space: nowrap;   text-align: center;   text-transform: uppercase;   font: bold 26vmax/.8 Open Sans, Impact;   -webkit-transform: translateX(-50%) translateY(-50%);   -ms-transform: translateX(-50%) translateY(-50%);   transform: translateX(-50%) translateY(-50%); }

   Text 

In this case you should change

@keyframes stripes {   100% {     background-position: 385px 0;   } } 

position depends on text width;

文章来源: Animate text fill from left to right