CODEWITHSUNDEEP
csscss-animationscakeyframeanimation
run_the_race
run_the_race

Reputation: 2318

CSS keyframe animation with multiple properties

I have a container div with an object inside of it. I can animate one property of it, e.g. bottom, OR left, but can't animate BOTH at the same time. How does one animate both properties at the same time so it moves diagonally? I don't understand why the following code does not work:

#container {
    position: relative;
}

@keyframes move { 
    0%     { left:   0px; bottom:   0px; }
    100%   { left: 122px; bottom: 157px; }
}

#object {
    position: absolute;
    width: 10px; 
    left:   0px;
    bottom: 0px;
    /*animation: name duration timing-function delay iteration-count direction fill-mode play-state; */    
    animation: move 2.5s linear 0s infinite;
}

Upvotes: 1

Views: 1833

Answers (2)

Temani Afif
Temani Afif

Reputation: 272742

You can consider translation to have the same movement with better performance:

#container {
    position: relative;
    height: 180px;
}

@keyframes move { 
    0%     { transform:translate(0,0) }
    100%   { transform:translate(125px,-125px) }
}

#object {
    position: absolute;
    width: 10px; 
    left:   0px;
    bottom: 0px;
    animation: move 2.5s linear 0s infinite;
}
<div id="container"><div id="object">MOVING</div></div>

Upvotes: 1

Johannes
Johannes

Reputation: 67748

It does move diagonally:

#container {
    position: relative;
    height: 180px;
}

@keyframes move { 
    0%     { left:   0px; bottom:   0px; }
    100%   { left: 122px; bottom: 157px; }
}

#object {
    position: absolute;
    width: 10px; 
    left:   0px;
    bottom: 0px;
    animation: move 2.5s linear 0s infinite;
}
<div id="container"><div id="object">MOVING</div></div>

Upvotes: 1

Related Questions