My goal is to smoothly move a <p> element to the bottom left of the page using CSS animation. However, I'm encountering issues with the animation as it starts at the original place and abruptly ends at the bottom. I need the animation to be seamless throughout the entire movement.
Could someone provide me with the correct code to achieve this?
Here is the code I am currently using:
$("#expandable").on('click', function(event) {
$("#expandable p").addClass("animated rotateOutUpLeft");
});.animated {
animation-duration: 2s;
animation-fill-mode: both;
}
@keyframes rotateOutUpLeft {
from {
transform-origin: left bottom;
opacity: 1;
}
to {
transform-origin: left bottom;
transform: rotate3d(0, 0, 1, -90deg);
opacity: 1;
margin: 5px;
position: fixed;
left: 20px;
bottom: 100px;
}
}
.rotateOutUpLeft {
animation-name: rotateOutUpLeft;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Header</h1>
<div id="expandable">
<div style="border: grey solid 2px;">
<h2>clickable div</h2><br>
<p><strong>text to move</strong></p>
</div>
</div>
</body>
</html>