CODEWITHSUNDEEP
csscss-animations
sukesh
sukesh

Reputation: 2423

how to animate CSS text-shadow property in mo.js

I'm learning to use the mo.js library, and this question is regarding that.
Is the text-shadow animation possible. There are examples for animating other css properties like border-width, background color, where the initial and end value is either a text or a number.

e.g.:

var htmlA = new mojs.Html({
  el: ".text",  
  background:{
   red:'black'
  },
  duration: 2000,
  repeat: 4,
  isYoyo: true
}).play();

which will turn the background from red to black in 2 seconds.
However, in my case, the text-shadow has an array of values. Please have a look at this pen.

https://codepen.io/anon/pen/QRXOWY

text-shadow: 1px 1px 1px rgba(16, 16, 16, 0.1),
    1px 2px 1px rgba(16, 16, 16, 0.1), 1px 3px 1px rgba(16, 16, 16, 0.1),
    1px 4px 1px rgba(16, 16, 16, 0.1), 1px 5px 1px rgba(16, 16, 16, 0.1),
    1px 6px 1px rgba(16, 16, 16, 0.1), 1px 7px 1px rgba(16, 16, 16, 0.1),
    1px 8px 1px rgba(16, 16, 16, 0.1), 1px 9px 1px rgba(16, 16, 16, 0.1),
    1px 10px 1px rgba(16, 16, 16, 0.1), 1px 18px 6px rgba(16, 16, 16, 0.1),
    1px -2px 10px rgba(16, 16, 16, 0.2);
}

I would like to apply the text-shadow to the text and then remove it in the reverse, so that it can look like the text is rising & dissolving into the background.

Upvotes: 0

Views: 167

Answers (1)

Karan Tewari
Karan Tewari

Reputation: 508

is that what you're trying to do?

https://codepen.io/karan_tewari601/pen/RmzxMb

have used 

@keyframes

Upvotes: 1

Related Questions