CODEWITHSUNDEEP
css-animations
user3574939
user3574939

Reputation: 829

CSS Animation on multiple properties

I would like to animate an element's bottom position and opacity simultaneously using CSS keyframes.

My element opacity is animating but the bottom position does not.

.custom-fade-down{
-webkit-animation: 23s ease 0s normal forwards 1 custom-down;
-moz-animation: 23s ease 0s normal forwards 1 custom-down;
    animation: 23s ease 0s normal forwards 1 custom-down;
}

@keyframes custom-down {
    from {
        opacity: 0;
        bottom: 10px;
    }

    to {
        opacity: 1;
        bottom: 1px;
    }
}

Upvotes: 0

Views: 3663

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62743

Your solution is close. Add a position: relative; to the .custom-fade-down class so the bottom prop takes effect.

$('div').addClass('custom-fade-down');
.custom-fade-down {
  width: 100px;
  height: 100px;
  bottom: -100px;
  background-color: black;
  -webkit-animation: 23s ease 0s normal forwards 1 custom-down;
  -moz-animation: 23s ease 0s normal forwards 1 custom-down;
  animation: 23s ease 0s normal forwards 1 custom-down;
}

@keyframes custom-down {
  from {
    opacity: 0;
    bottom: -100px;
  }
  to {
    opacity: 1;
    bottom: 0px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position: relative;"></div>

Upvotes: 1

Related Questions