在图像切换之间添加CSS过渡

Question

In my site I have a switch between a down arrow & and an up arrow. See here

How do I change this to a CSS transition, so there's a brief break between the switch?

Here's my code:

 function close_accordion_section(source) { $(source).parent().find('.accordion-section-title').removeClass('active'); $(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open'); } $('.accordion-section-title').click(function (e) { if ($(e.target).is('.active')) { close_accordion_section(e.target); } else { $(this).addClass('active'); $(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open') } e.preventDefault(); }); 

 .accordion { overflow: hidden; margin-bottom: 40px; } .accordion-section { padding: 15px; border: 1px solid #d8d8d8; background: #fbfbfb; } .accordion-section-title { width: 100%; display: inline-block; background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png"); background-size: 5% 100%; background-repeat: no-repeat; background-position: top right; } .accordion-section-title.active { background: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png") top right no-repeat; background-size: 5% 100%; background-repeat: no-repeat; } .accordion-section-title.active, .accordion-section-title:hover { text-decoration: none; transition: color 0.1s linear; } .accordion-section-content { padding: 15px 0; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="accordion"> <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1">More information</a> <div id="accordion-1" class="accordion-section-content"> <p>Text.</p> <p> </div> </div> </div> 

Answer 1

You can do this in 2 ways that I can think of. One is by jQuery-UI and add a

.delay(2000) 

to the end of your transition. The other way is in your css class for your transition is do a

transition-delay: 2s;

For the arrow, it would be better to transition and rotate the image.

.rotate{
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

Here is a neat website to help you with that: http://www.css3maker.com/css3-transition.html