Card slider using CSS Keyframes
26-May-2017
2 minutes read

CSS Keyframes is a powerful feature to create animations in CSS.

Below is a small snippet I created for slider like animation.

<div id="card">Click me to animate</div>
.animate { opacity: 1; animation: slider 1s linear; } @keyframes slider { 0% { margin-left: 0; opacity: 1; } 25% { margin-left: -200px; opacity: 0; } 50% { margin-left: 200px; opacity: 0; } 100% { margin-left: 0; opacity: 1; } } #card { background: #1f1f1f; margin: 10px; display: block; border: 1px dashed white; height: 200px; width: 200px; color: white; font-weight: bold; padding: 10px; text-align: center; cursor: pointer; }
$("#card").on("click", () => { $("#card").addClass("animate"); setTimeout(() => $("#card").removeClass("animate"), 1000); });

Here is the link to the codepen

Most of the browsers do support keyframes now. Here is the "Can I Use" page for keyframes.

Share
Like
profile-image
Prasanna is a full stack web developer, with exposure to various programming languages. Uses mostly Java, Javascript these days and got ~13 years of architecting and coding enterprise software solutions.