Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
@keyframes slideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Without forwards: element returns to hidden after animation */ .bad { animation: slideIn 0.5s ease; } /* With forwards: element stays visible */ .good { animation: slideIn 0.5s ease forwards; } /* both: applies from state before delay, to state after end */ .full { animation: slideIn 0.5s 0.2s ease both; }
Result
Open