Can Keyframes be created using javascript dynamically?

Question

I want to create key frame dynamically, i need to show sheen effect over the image find the code is below.

var logo = document.querySelector('#main-logo');
var divshinny = document.querySelector('.shiny-effect');

divshinny.style.height = logo.offsetHeight + 'px';
divshinny.style.webkitMaskSize = logo.offsetWidth + 'px';

.logo-animation {
  width: 40%;
  margin: auto;
  height: 100%;
  position: absolute;
}

.logo-animation #logo-shinny {
  position: relative;
  display: block;
  width: 100%;
  height: 90%;
  text-align: center;
  margin: 5% auto;
}

.logo-animation #logo-shinny img {
  width: 100%;
}

.logo-animation #logo-shinny .shiny-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 0.5) 98%, rgba(255, 255, 255, 0) 100%) no-repeat;
  -webkit-mask: url("http://dev.iamvdo.me/newLogoCSS3create2.png") center;
  -webkit-mask-size: 500px 361px;
  -webkit-mask-repeat: no-repeat;
  -webkit-animation-name: ShineAnimation;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

@-webkit-keyframes ShineAnimation {
  from {
    background-position: -200px 0px;
  }
  to {
    background-position: 0px 0px;
  }
}

<div class="logo-animation">
  <div id="logo-shinny">
    <img src="http://dev.iamvdo.me/newLogoCSS3create2.png" id="main-logo" />
    <div class="shiny-effect"></div>
  </div>
</div>

The issue is image resizes based on the screen size for bigger screen the image size will be bigger, but the sheen effect is based on background position in px, my question is can i directly create the keyframes using javascript based on the image size. if there is any other way this can be achieved please let me know.

Thanks in advance.

Here is how to create keyframes dynamically: https://jsfiddle.net/wemmcknj/ — Asons, May 18 '17 at 08:23
Thanks, its working there is a minor error in this fiddle. i fixed it and its working thanks :) . @LGSon — saikrishna, May 18 '17 at 09:27

score 2 · Accepted Answer · answered May 21 '17 at 07:36

I have changed you keyframes from using px to using %.

The trick for this option to work is setting the background-size to a value different than 100%. If this is the case, % positions won't work.

I have also removed webkit prefixes, they are no longer needed in modern browsers.

var logo = document.querySelector('#main-logo');
var divshinny = document.querySelector('.shiny-effect');

divshinny.style.height = logo.offsetHeight + 'px';
divshinny.style.webkitMaskSize = logo.offsetWidth + 'px';

.logo-animation {
  width: 40%;
  margin: auto;
  height: 100%;
  position: absolute;
}

.logo-animation #logo-shinny {
  position: relative;
  display: block;
  width: 100%;
  height: 90%;
  text-align: center;
  margin: 5% auto;
}

.logo-animation #logo-shinny img {
  width: 100%;
}

.logo-animation #logo-shinny .shiny-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 0.5) 98%, rgba(255, 255, 255, 0) 100%);
  background-repeat: no-repeat;
  background-size: 50% 100%;
  animation-name: ShineAnimation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes ShineAnimation {
  from {
    background-position: -100% 0px;
  }
  to {
    background-position: 100% 0px;
  }
}

<div class="logo-animation">
  <div id="logo-shinny">
    <img src="http://dev.iamvdo.me/newLogoCSS3create2.png" id="main-logo" />
    <div class="shiny-effect"></div>
  </div>
</div>

score 0 · Answer 2 · edited May 23 '17 at 12:10

There are following options:

You can use background-position with percentage instead of pixels. That would require the image be also dependent on the container width (e.g. the image width should also be set in percentage)
You can use viewport measurement units: vertical height and vertical width (e.g. 100vh and 100vw) instead of percentage. This might fit better because your image depends on a screen size. Again, ideally the image size should also be set in those viewport measurement units then.
You can generate CSS together with your animation with JavaScript, see e.g. this. However I would not go this way because the two options above must cover 99.9% of your needs.

Hi Thanks for the solution can you please provide me with a sampel use case of image with percentage and fiddle or codepen link. — saikrishna, May 18 '17 at 09:28

Can Keyframes be created using javascript dynamically?

2 Answers2