I want to make an animated addition of the class and its removal. I found Google about transition in Google, but for some reason it does not work. how to do?
$('button.add').click(function() { $('div.required').addClass('required-empty'); setTimeout(function () { $('div.required').removeClass('required-empty'); }, 5000); }); .required { position: relative; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; width: 100px; height: 50px; background: #333; margin-left: 100px; } .required:before { position: absolute; width: 11px; height: 11px; line-height: 12px; font-size: 20px; text-align: center; left: -18px; top: 50%; color: #e0e0e3; content: "R"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .required:after { content: ""; } .required.required-red:before { color: #fa6464; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .required-empty { position: relative; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .required-empty:after { position: absolute; width: 11px; height: 11px; line-height: 12px; font-size: 30px; text-align: center; right: -18px; top: 50%; color: #fa6464; content: "s"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <div class="required required-red"> </div> <button class="add">addClass</button> 