etoile

zanimo-animation.js

var before = " #star:before{ border-bottom: 80px solid rgb(253,107,107); border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform:    rotate(-35deg); -ms-transform:     rotate(-35deg); -o-transform:      rotate(-35deg);}";



//https://css-tricks.com/examples/ShapesOfCSS/

var after = "#star:after { position: absolute; display: block; color: rgb(253,107,107); top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid rgb(253,107,107); border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform:    rotate(-70deg); -ms-transform:     rotate(-70deg); -o-transform:      rotate(-70deg); content: ''; }";

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = before;
document.getElementsByTagName('head')[0].appendChild(style);

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = after;
document.getElementsByTagName('head')[0].appendChild(style);


var star = create({
  width:'100px',
  height:'100px',
  backgroundColor: 'transparent',
  top: (height/2 - 100) + 'px',
  left: (width/2 - 100) + 'px',
  opacity: 0,
  margin: '50px 0',
  position: 'relative',
  display: 'block',
  color: 'rgb(253,107,107)',
  width: '0px',
  height: '0px',
  borderRight: '100px solid transparent',
  borderBottom:'70px  solid rgb(253,107,107)',
  borderLeft: '100px solid transparent',
  transform: 'rotate(35deg)'
});

star.id = "star";

return Zanimo(
        star,
        'opacity',
        1,
        1000
    ).then(Zanimo.f(
        'transform',
        'rotate(346361deg)',
        100000,
        'ease-in-out'
    ));