Animate CSS properties

[Shaan]

Hello,

I’m trying to animate the position and dimensions of a DIV using animation.

Here is my CSS:

div.photo-1
{
  border: 3px solid #999;
  border-radius: 14px;
  overflow: hidden;
  position: absolute; left: 20vw; top:5vh; height: 10vw; width: 10vw;
  animation: none 2.3s forwards;
  -webkit-animation: none 2.3s forwards;
  -moz-animation: none 2.3s forwards;
  -o-animation: none 2.3s forwards;
  z-index: 990;
}
@keyframes photo-1
{
  from {left: 20vw; top: 5vh; height:10vw; width:10vw; z-index: 990}
  to   {left: 17.5vw; top:14vh; height: 15vw; width: 15vw; z-index:991}
}

I’m changing the animationName to ‘photo-1’ onClick of the DIV element.
I’m changing the animationName property using javascript.

document.getElementById('photo-1').animationName = 'photo-1'

This is not working, Could someone please help? Where am I going wrong? Im using Safari 10.0.2 (10602.3.12.0.1)

Many thanks, Dank u!
Shaan van Inde

[Shikkediel]

Hoi, I think you made a mistake referring to the animation with none. That should of course be photo-1. It is best to put the default rule, without a browser prefix, as the last one in line by the way.

animation: none 2.3s forwards;

animation: photo-1 2.3s forwards;

I’m changing the animationName to ‘photo-1’

I assume you’re adding a class? Can’t see how you would be changing the animation name itself…

[Shaan]

I’m changing the animationName property using javascript.
document.getElementById(‘photo-1’).animationName = ‘photo-1’

[Shikkediel]

Okay, that is a possibility of course. I must’ve missed that. I think it makes more sense to add a class though, any prefixed CSS will otherwise be abundant.

Looks like .style is missing in your approach:

document.getElementById('photo-1').style.animationName = 'photo-1';

Does the element have an id? I only see it being referred to with a class div.photo-1…

[Shaan]

Hoi Shikkediel,
It works now. I was indeed missing the style before the animationName in the javascript.

Thanks! Dank je!
Shaan

[Author]

Posts