DEMO 1 图片切换


.demo_1{
    width: 200px;
    position: relative;
}
.demo_1 .img_1{
    position: absolute; ;
    transition-duration: 1s;
    transform: rotate(0deg) scale(1,1);
}
.demo_1 .img_2{
    transition-duration: 1s;
     position: absolute; ;
    transform: rotate(0deg) scale(0,0);
}

.demo_1:hover .img_1{
    transition-duration: 1s;
    transform: rotate(360deg) scale(0,0);
}
.demo_1:hover .img_2{
    transition-duration: 1s;
    transform: rotate(360deg) scale(1,1);
}
        

        
tips: hover图片

DEMO 2 弹性效果


input:not(:focus) + .callout:not(:hover) {
    transform: scale(0);
    transition: .25s transform;
}

.callout {
    transition: .5s cubic-bezier(.25,.1,.3,1.5) transform;
    transform-origin: 1.4em -.4em;
}