#04animation: send button transforms into birds

04animation-send-button-transforms-into-birds.markdown

#04animation: send button transforms into birds

A css animation of a send button transforming into flying birds when clicked.

A Pen by Claudia on CodePen.

License.

index.html

<div class="wrapper-no4">
    <button class="button-bird">
        <p class="button-bird__text">SEND</p>
        <svg version="1.1" class="feather" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 75 38" style="enable-background:new 0 0 75 38;" xml:space="preserve">
        <g>
            <path d="M20.8,31.6c3.1-0.7,2.9-2.3,2,1c9.1,4.4,20.4,3.7,29.1-0.8l0,0c0.7-2.1,1-3.9,1-3.9c0.6,0.8,0.8,1.7,1,2.9
                c4.1-2.3,7.6-5.3,10.2-8.3c0.4-2.2,0.4-4,0.4-4.1c0.6,0.4,0.9,1.2,1.2,2.1c4.5-6.1,5.4-11.2,3.7-13.5c1.1-2.6,1.6-5.4,1.2-7.7
                c-0.5,2.4-1.2,4.7-2.1,7.1c-5.8,11.5-16.9,21.9-30.3,25.3c13-4,23.6-14.4,29.1-25.6C62.8,9,55.6,16.5,44.7,20.7
                c2.1,0.7,3.5,1.1,3.5,1.6c-0.1,0.4-1.3,0.6-3.2,0.4c-7-0.9-7.1,1.2-16,1.5c1,1.3,2,2.5,3.1,3.6c-1.9-0.9-3.8-2.2-5.6-3.6
                c-0.9,0.1-10.3,4.9-22.6-12.3C5.9,17.7,11.8,26.9,20.8,31.6z"/>
        </g>
        </svg>
        <span class="bird"></span>
        <span class="bird--1"></span>
        <span class="bird--2"></span>
        <span class="bird--3"></span>
        <span class="bird--4"></span>
        <span class="bird--5"></span>
        <span class="bird--6"></span>
        <span class="bird--7"></span>
        <span class="bird--8"></span>
        <span class="bird--9"></span>
        <span class="bird--10"></span>
        <span class="bird--11"></span>
        <span class="bird--12"></span>
        <span class="bird--13"></span>
        <span class="bird--14"></span>
        <span class="bird--15"></span>
        <span class="bird--16"></span>
        <span class="bird--17"></span>
        <span class="bird--18"></span>
        <span class="bird--19"></span>
        <span class="bird--20"></span>
        <span class="bird--21"></span>
        <span class="bird--22"></span>
        <span class="bird--23"></span>
        <span class="bird--24"></span>
        <span class="bird--25"></span>
        <span class="bird--26"></span>
        <span class="bird--27"></span>
        <span class="bird--28"></span>
        <span class="bird--29"></span>
        <span class="bird--30"></span>
    </button>
 </div>

script.js

document.addEventListener("DOMContentLoaded", function(){
      var el = document.querySelector(".button-bird");
      var text = document.querySelector(".button-bird__text");
          el.addEventListener('click', function() {
            el.classList.toggle('active');

            if(el.classList.contains('active')){
            	console.log('true');
            	text.innerHTML = 'DONE';
            }else{
            	text.innerHTML = 'SEND';
            }
        });
    });

style.scss

$sizeh4: 25px;
$sizew4: 59px;
$sizew4fore: 118px;
$color4: #131335;
$color4Blue: #BEEDFF;
$widthBird2: 60px;
$widthBird1: 30px;
$heightBird2: 33px;

body{
	margin: 0;
	padding: 0;
	overflow-x:hidden;
}
.wrapper-no4 {
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(to bottom, $color4Blue, white);
	height: 100vh;
	width: 100vw;
	max-width:100%;
	overflow: hidden;

	.button-bird{
		width: 300px; 
		height: 88px;
		background-color: $color4;
		border-radius: 5px;
		position: absolute;
		top: 50%; 
		opacity: 1;
		transform: translateY(-50%);
		padding: 0;
		border: none;
		display: flex;
		justify-content: center;

		&__text{
			text-align: center;
			font-size: 20px;
			font-family: Helvetica, Arial, sans-serif;
			color: $color4Blue;
			position: absolute;
			z-index: 1000;
			top: 50%;
			margin: 0;
			transform: translateY(-50%);
		} 
		&:focus {
		  outline: none;
		}
		&:hover{
			.bird--30{
				left: 600px;
				top: -550px;
				opacity: 0;
				transition: left 1.5s cubic-bezier(0.42, 0, 0.58, 1), top 1.5s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.5s linear 1s;
			}
			.bird--30:after{
				left: 50px;
				top: 50px;
				transition: all 1.5s cubic-bezier(0.42, 0, 0.58, 1) -0.5s;
			}
			.bird--30:before{
				left: -50px;
				top: 50px;
				transition: all 1.5s cubic-bezier(0.42, 0, 0.58, 1) -0.5s;
			}
		}

		.feather{
			position: absolute;
			width: 18%;
			left: 40%;
			top: 12px;
			display: none;
			opacity: 0;
			fill: $color4;
		}
	}
	
	.button-bird.active {
		background-color: transparent;
		transition: all 0.2s linear 0.1s;

		.button-bird__text{
			color: $color4;
			animation: text-fade 1.5s 0.2s;
		}
		.feather{
			display: block;
			animation: feather-fade 1.5s linear 0.5s forwards;
		}
		.bird--20,
		.bird--19,
		.bird--18,
		.bird--21,
		.bird--23,
		.bird--25,
		.bird--30{
			left: 600px;
			top: -550px;
			opacity: 0;
			transition: left 2s cubic-bezier(0.42, 0, 0.58, 1), top 2s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.5s linear 1.5s;
		}
		.bird--5,
		.bird--17,
		.bird--16,
		.bird--15,
		.bird--22{
			left: 600px;
			top: -600px;
			opacity: 0;
			transition: left 2s cubic-bezier(0.42, 0, 0.58, 1) 0.1s, top 2s cubic-bezier(0.42, 0, 0.58, 1) 0.1s, opacity 0.5s linear 1.6s;
		}
		.bird--14,
		.bird--13,
		.bird--12,
		.bird--24,
		.bird--1{
			left: 650px;
			top: -650px;
			opacity: 0;
			transition: left 2s cubic-bezier(0.42, 0, 0.58, 1) 0.15s, top 2s cubic-bezier(0.42, 0, 0.58, 1) 0.15s, opacity 0.5s linear 1.65s;
		}
		.bird--11,
		.bird--10,
		.bird--9,
		.bird--26,
		.bird--27{
			left: 650px;
			top: -700px;
			opacity: 0;
			transition: left 2s cubic-bezier(0.42, 0, 0.58, 1) 0.2s, top 2s cubic-bezier(0.42, 0, 0.58, 1) 0.2s, opacity 0.5s linear 1.7s;
		}
		.bird--8,
		.bird--7,
		.bird--6,
		.bird--28{
			left: 700px;
			top: -750px;
			opacity: 0;
			transition: left 2s cubic-bezier(0.42, 0, 0.58, 1) 0.25s, top 2s cubic-bezier(0.42, 0, 0.58, 1) 0.25s, opacity 0.5s linear 1.75s;
		}
		.bird,
		.bird--4,
		.bird--29,
		.bird--3{
			left: 750px;
			top: -800px;
			opacity: 0;
			transition: left 2s cubic-bezier(0.42, 0, 0.58, 1) 0.3s, top 2s cubic-bezier(0.42, 0, 0.58, 1) 0.3s, opacity 0.5s linear 1.8s;
		}
		.bird--2{
			left: 850px;
			top: -850px;
			opacity: 0;
			transition: left 1.5s cubic-bezier(0.42, 0, 0.58, 1) 0.35s, top 1.5s cubic-bezier(0.42, 0, 0.58, 1) 0.35s, opacity 0.5s linear 1.8s;
		}
		.bird--5:after,
		.bird--4:after,
		.bird--8:after,
		.bird--14:before,
		.bird--16:after,
		.bird--17:before,
		.bird--21:after,
		.bird--30:after,
		.bird--30:before{
			left: 50px;
			top: -100px;
			transition: all 1s cubic-bezier(0.42, 0, 0.58, 1) -0.3s;
		}
		.bird--4:before,
		.bird--7:before,
		.bird--9:after,
		.bird--12:before,
		.bird--13:before,
		.bird--18:after,
		.bird--27:after,
		.bird--26:before{
			left: -50px;
			top: 0px;
			transition: all ss cubic-bezier(0.42, 0, 0.58, 1) -0.5s;
		}
		.bird:before,
		.bird--2:after,
		.bird--1:after,
		.bird--7:after,
		.bird--8:before,
		.bird--15:after,
		.bird--19:before,
		.bird--22:after,
		.bird--28:after,
		.bird--28:before,
		.bird--3:after{
			left: 100px;
			top: -100px;
			transition: all 1s cubic-bezier(0.42, 0, 0.58, 1) 0s;
		}
		.bird--2:before,
		.bird--1:before,
		.bird--9:before,
		.bird--12:after,
		.bird--13:after,
		.bird--17:after,
		.bird--19:before,
		.bird--23:after,
		.bird--23:before{
			left: 50px;
			top: -10px;
			transition: all 2s cubic-bezier(0.42, 0, 0.58, 1) -0.5s;
		}
		.bird:after,
		.bird--6:before,
		.bird--10:after,
		.bird--11:after,
		.bird--16:before,
		.bird--18:before,
		.bird--20:before,
		.bird--24:before,
		.bird--26:after,
		.bird--27:before{
			left: 50px;
			top: 50px;
			transition: all 2s cubic-bezier(0.42, 0, 0.58, 1) -0.5s;
		}
		.bird--3:before,
		.bird--6:after,
		.bird--10:before,
		.bird--11:before,
		.bird--14:after,
		.bird--15:before,
		.bird--20:after,
		.bird--22:before,
		.bird--24:after,
		.bird--25:after,
		.bird--25:before,
		.bird--5:before{
			left: 100px;
			top: -10px;
			transition: all 2s cubic-bezier(0.42, 0, 0.58, 1) -0.5s;
		}	
		
	}
	
	//size of two birds
	.bird,
	.bird:before,
	.bird:after,
	.bird--1,
	.bird--1:after,
	.bird--1:before,
	.bird--2,
	.bird--2:after,
	.bird--2:before,
	.bird--3,
	.bird--3:after,
	.bird--3:before,
	.bird--4,
	.bird--4:after,
	.bird--4:before,
	.bird--5,
	.bird--5:after,
	.bird--5:before,
	.bird--6,
	.bird--6:after,
	.bird--6:before,
	.bird--7,
	.bird--7:after,
	.bird--7:before,
	.bird--8,
	.bird--8:after,
	.bird--8:before,
	.bird--9,
	.bird--9:after,
	.bird--9:before,
	.bird--10,
	.bird--10:after,
	.bird--10:before,
	.bird--11,
	.bird--11:after,
	.bird--11:before,
	.bird--12,
	.bird--12:after,
	.bird--12:before,
	.bird--13,
	.bird--13:after,
	.bird--13:before,
	.bird--14,
	.bird--14:after,
	.bird--14:before,
	.bird--15,
	.bird--15:after,
	.bird--15:before,
	.bird--16,
	.bird--16:after,
	.bird--16:before,
	.bird--17,
	.bird--17:after,
	.bird--17:before,
	.bird--18,
	.bird--18:after,
	.bird--18:before,
	.bird--19,
	.bird--19:after,
	.bird--19:before,
	.bird--20,
	.bird--20:after,
	.bird--20:before,
	.bird--21,
	.bird--21:after,
	.bird--21:before,
	.bird--22,
	.bird--22:after,
	.bird--22:before,
	.bird--23,
	.bird--23:after,
	.bird--23:before,
	.bird--24,
	.bird--24:after,
	.bird--24:before,
	.bird--25,
	.bird--25:after,
	.bird--25:before,
	.bird--26,
	.bird--26:after,
	.bird--26:before,
	.bird--27,
	.bird--27:after,
	.bird--27:before,
	.bird--28,
	.bird--28:after,
	.bird--28:before,
	.bird--29,
	.bird--29:after,
	.bird--29:before,
	.bird--30,
	.bird--30:after,
	.bird--30:before {
		opacity: 1;
	  display:block;
	  position: absolute;
	  background-image: url('http://cfriedri.ch/codepen/04/birds.svg');
	  background-size: auto 100%;
	  width: $widthBird2;
      height: $heightBird2;
      top: 0;
      left: 0;
	  animation-name: fly-cycle;
	  animation-timing-function: steps(3);
	  animation-iteration-count: infinite;
	}
	//size of one bird
	.bird--1:after,
	.bird--1:before,
	.bird--2:after,
	.bird--2:before,
	.bird--4:after,
	.bird--4:before,
	.bird--5:after,
	.bird--5:before,
	.bird--7:after,
	.bird--7:before,
	.bird--8:after,
	.bird--8:before,
	.bird--10:after,
	.bird--10:before,
	.bird--11:after,
	.bird--11:before,
	.bird--13:after,
	.bird--13:before,
	.bird--14:after,
	.bird--14:before,
	.bird--16:after,
	.bird--16:before,
	.bird--17:after,
	.bird--17:before,
	.bird--18,
	.bird--18:after,
	.bird--18:before,
	.bird--19,
	.bird--19:after,
	.bird--19:before,
	.bird--20:after,
	.bird--20:before,
	.bird--21,
	.bird--21:after,
	.bird--21:before,
	.bird--22,
	.bird--22:after,
	.bird--22:before,
	.bird--23,
	.bird--23:after,
	.bird--23:before,
	.bird--24,
	.bird--24:after,
	.bird--24:before,
	.bird--25,
	.bird--25:after,
	.bird--25:before,
	.bird--26,
	.bird--26:after,
	.bird--26:before,
	.bird--27,
	.bird--27:after,
	.bird--27:before,
	.bird--28,
	.bird--28:after,
	.bird--28:before,
	.bird--29,
	.bird--29:after,
	.bird--29:before,
	.bird--30,
	.bird--30:after,
	.bird--30:before{
		width: $widthBird1;
      	height: $heightBird2;
      	top: -8px;
      	left: 8px;
      	z-index: -100;
	}
	.bird--21,
	.bird--22,
	.bird--23,
	.bird--24,
	.bird--25,
	.bird--26,
	.bird--27,
	.bird--28,
	.bird--29{
		top: 0;
	}
	
	.bird--22,
	.bird--25,
	.bird--28{
		top: $sizeh4;
	}

	.bird--23,
	.bird--26,
	.bird--29{
		top: 2 * $sizeh4 - 5px;
	}
	.bird--24,
	.bird--25,
	.bird--26{
		left: $sizew4fore + 15px;
	}
	.bird--27,
	.bird--28,
	.bird--29{
		left: 2 * $sizew4fore + 20px;
	}
	.bird--18{
		top:0;
		left:0;
	}
	.bird--18:after,
	.bird--18:before{
		left: -20px;
	}
	.bird--19:after,
	.bird--19:before{
		left: -10px;
	}
	.bird--1:before,
	.bird--4:before,
	.bird--7:before,
	.bird--10:before,
	.bird--13:before,
	.bird--16:before,
	.bird--19:before{
      	top: 18px;
	}
	.bird--2:after,
	.bird--5:after,
	.bird--8:after,
	.bird--11:after,
	.bird--14:after,
	.bird--17:after,
	.bird--20:after{
      	top: -18px;
      	left: 12px
	}
	.bird--20:after,
	.bird--20:before,
	.bird--21:after{
      	left: 27px
	}
	.bird--2:before,
	.bird--5:before,
	.bird--8:before,
	.bird--11:before,
	.bird--14:before,
	.bird--17:before,
	.bird--20:before{
      	top: -36px;
      	left: 12px
	}
	.bird--21:before,
	.bird--22:before,
	.bird--23:before,
	.bird--24:before,
	.bird--25:before,
	.bird--26:before{
      	top: 10px;
    	left: 45px;
	}
	.bird--21:after,
	.bird--22:after,
	.bird--23:after,
	.bird--24:after,
	.bird--25:after,
	.bird--26:after,
	.bird--27:after,
	.bird--28:after,
	.bird--29:after{
      	left: 10px;
    	top: 4px;
	}
	.bird--27:before,
	.bird--28:before,
	.bird--29:before{
    	left: -45px;
    	top: 10px;
	}

	.bird:before,
	.bird:after,
	.bird--1:after,
	.bird--1:before,
	.bird--2:before,
	.bird--2:after,
	.bird--3:after,
	.bird--3:before,
	.bird--4:after,
	.bird--4:before,
	.bird--5:after,
	.bird--5:before,
	.bird--6:after,
	.bird--6:before,
	.bird--7:after,
	.bird--7:before,
	.bird--8:after,
	.bird--8:before,
	.bird--9:after,
	.bird--9:before,
	.bird--10:after,
	.bird--10:before,
	.bird--11:after,
	.bird--11:before,
	.bird--12:after,
	.bird--12:before,
	.bird--13:after,
	.bird--13:before,
	.bird--14:after,
	.bird--14:before,
	.bird--15:after,
	.bird--15:before,
	.bird--16:after,
	.bird--16:before,
	.bird--17:after,
	.bird--17:before,
	.bird--18:after,
	.bird--18:before,
	.bird--19:after,
	.bird--19:before,
	.bird--20:after,
	.bird--20:before,
	.bird--21:after,
	.bird--21:before,
	.bird--22:after,
	.bird--22:before,
	.bird--23:after,
	.bird--23:before,
	.bird--24:after,
	.bird--24:before,
	.bird--25:after,
	.bird--25:before,
	.bird--26:after,
	.bird--26:before,
	.bird--27:after,
	.bird--27:before,
	.bird--28:after,
	.bird--28:before,
	.bird--29:after,
	.bird--29:before,
	.bird--30:after,
	.bird--30:before{
		content: '';
	}
	.bird:before,
	.bird--3:before,
	.bird--12:before,
	.bird--15:before,
	.bird--6:before,
	.bird--9:before,
	.bird--18:before{
		top: 10px;
	}
	.bird:after,
	.bird--6:after,
	.bird--12:after,
	.bird--15:after,
	.bird--9:after,
	.bird--18:after{
		top: $sizeh4 + 10px;
	}
	.bird--3:after{
		left: -10px;
	}
	.bird--3:after{
		top: $sizeh4 + 15px;
	}
	.bird--1,
	.bird--4,
	.bird--7,
	.bird--10,
	.bird--13,
	.bird--16,
	.bird--19{
		top: $sizeh4;
	}
	.bird--2{
		top: 2 * $sizeh4 - 5px;
	}
	.bird--5{
		top: 2 * $sizeh4 - 3px;
		left: 25px;
	}
	
	.bird--8,
	.bird--11,
	.bird--14,
	.bird--17,
	.bird--20{
		top: 2 * $sizeh4;
	}
	.bird--3,
	.bird--4{
		left: $sizew4;
	}
	.bird--6,
	.bird--7,
	.bird--8{
		left: 2 * $sizew4;
	}
	.bird--9,
	.bird--10,
	.bird--11{
		left: 3 * $sizew4;
	}
	.bird--12,
	.bird--13,
	.bird--14{
		left: 4 * $sizew4;
	}
	.bird--15,
	.bird--16,
	.bird--17{
		left: 3.5 * $sizew4;
	}
	.bird--20{
		left: 2 * $sizew4 - 10px;
	}
	.bird--18,
	.bird--19{
		left: 2.5 * $sizew4 - 10px;
	}
	.bird--30,
	.bird--30:after,
	.bird--30:before{
		left: 2 * $sizew4;
		top: 0;
	}
	.bird--30:before{
		top: $sizeh4;
	}
	.bird--30:after{
		top: 20px;
	}
	.active,
	.button-bird:hover{
		.bird,
		.bird:before,
		.bird--3,
		.bird--4,
		.bird--4:after,
		.bird--4:before,
		.bird--9,
		.bird--9:after,
		.bird--13,
		.bird--13:after,
		.bird--13:before,
		.bird--15,
		.bird--16,
		.bird--18,
		.bird--21,
		.bird--21:after,
		.bird--27:before,
		.bird--24,
		.bird--24:after,
		.bird--24:before,
		.bird--27,
		.bird--27:after,
		.bird--27:before,
		.bird--30:before {
			animation-duration: 0.5s;
			animation-delay: -0.5s;
		}
		
		.bird--1,
		.bird--1:after,
		.bird--3:before,
		.bird--5,
		.bird--5:after,
		.bird--5:before,
		.bird--7,
		.bird--7:after,
		.bird--7:before,
		.bird--9:before,
		.bird--10,
		.bird--10:after,
		.bird--10:before,
		.bird--14,
		.bird--14:after,
		.bird--14:before,
		.bird--17,
		.bird--17:after,
		.bird--17:before,
		.bird--19,
		.bird--19:after,
		.bird--19:before,
		.bird--18:after,
		.bird--22,
		.bird--22:after,
		.bird--22:before,
		.bird--25,
		.bird--25:after,
		.bird--25:before,
		.bird--28,
		.bird--28:after,
		.bird--28:before,
		.bird--30:after {
		  animation-duration: 0.7s;
		  animation-delay: -0.5s;
		}
		.bird:after,
		.bird--1:before,
		.bird--2,
		.bird--2:before,
		.bird--2:after,
		.bird--3:after,
		.bird--6,
		.bird--6:after,
		.bird--6:before,
		.bird--8,
		.bird--8:after,
		.bird--8:before,
		.bird--11,
		.bird--11:after,
		.bird--11:before,
		.bird--12,
		.bird--12:after,
		.bird--12:before,
		.bird--16,
		.bird--16:after,
		.bird--16:before,
		.bird--20,
		.bird--20:after,
		.bird--20:before,
		.bird--18:before,
		.bird--23,
		.bird--23:after,
		.bird--23:before,
		.bird--26,
		.bird--26:after,
		.bird--26:before,
		.bird--29,
		.bird--29:after,
		.bird--29:before,
		.bird--30 {
		  animation-duration: 0.6s;
		  animation-delay: -0.75s;
		}
	} 

	@keyframes fly-cycle {
	  100% {
	  	background-position: -360px 0; 
	  } 
	}
	@keyframes text-fade {
	  0% {
	  	color: transparent;
	  	opacity: 1;
	  	top: -50%;
	  	left: auto;
	  }
	  1% {
	  	color: transparent;
	  	opacity: 0;
	  } 
	  50%{
	  	color: transparent;
	  	opacity: 0;
	  }
	  100% {
	  	color: $color4;
	  	opacity: 1;
	  } 
	}
	@keyframes feather-fade {
	  0% {
	  	top: -100px;
	  	opacity: 0;
	  }
	  25% {
	  	transform: rotate(10deg);
	  	left: 30%;
	  } 
	  50%{
	  	transform: rotate(-5deg);
	  	opacity: 1;
	  	left: 45%;
	  }
	  75%{
	  	transform: rotate(10deg);
	  	left: 32%;
	  }
	  100% {
	  	transform: rotate(0deg);
	  	opacity: 1;
	  	top: 12px;
	  	left: 43%;
	  } 
	}
}

Yui