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: jsfiddle.net/wemmcknj — Asons
– Asons, Commented May 18, 2017 at 8:23
Thanks, its working there is a minor error in this fiddle. i fixed it and its working thanks :) . @LGSon — saikrishna
– saikrishna, Commented May 18, 2017 at 9:27

vals · Accepted Answer · 2017-05-21 07:36:16Z

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>

Community · Accepted Answer · 2017-05-23 12:10:41Z

0

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.

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered May 18, 2017 at 7:32

smnbbrv

24.7k9 gold badges85 silver badges115 bronze badges

1 Comment

saikrishna Over a year ago

Hi Thanks for the solution can you please provide me with a sampel use case of image with percentage and fiddle or codepen link.

Collectives™ on Stack Overflow

Can Keyframes be created using javascript dynamically?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related