An example of flashy HTML 5 effects

flip-button.css

.flip-button.is-open ~ .description {
  opacity: 0; 
}

.flip-button {
  display: block;
  position: relative;
  width: 100px;
  height: 2em;
  border-radius: 5px;
  -webkit-transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  text-align: center;
}

.flip-button-front {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 2em;
  border-radius: 5px;
  border: 1px solid #8B0000;
  background-color: #F44336;
  color: #fff;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
          transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1); 
}

.flip-button-front:hover {
    background-color: #f77066; 
}

.flip-button-back {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #eee;
  color: #222;
  -webkit-transform: translateZ(-2px) rotateX(180deg);
          transform: translateZ(-2px) rotateX(180deg);
  overflow: hidden;
  -webkit-transition: box-shadow 0.8s ease;
          transition: box-shadow 0.8s ease; 
}

.flip-button-back p {
    margin-top: 27px;
    margin-bottom: 25px; 
}

.flip-button-back button {
    padding: 12px 20px;
    width: 30%;
    margin: 0 5px;
    background-color: transparent;
    border: 0;
    border-radius: 2px;
    font-size: 1em;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: background 0.15s ease;
            transition: background 0.15s ease; 
}

.flip-button-back button:focus {
    outline: 0; 
}

.flip-button-back button.yes {
    background-color: #2196F3;
    color: #fff; 
}

.flip-button-back button.yes:hover {
    background-color: #51adf6; 
}

.flip-button-back button.no {
    color: #2196F3; 
}

.flip-button-back button.no:hover {
    background-color: #ddd; 
}

.flip-button[data-direction="left"] .flip-button-back,
.flip-button[data-direction="right"] .flip-button-back {
  -webkit-transform: translateZ(-2px) rotateY(180deg);
          transform: translateZ(-2px) rotateY(180deg);
}

.flip-button.is-open {
  width: 400px;
  height: 160px; 
}

.flip-button.is-open .flip-button-front {
    pointer-events: none;
    line-height: 160px; 
	display: none;
}

.flip-button.is-open .flip-button-back {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); 
}

.flip-button[data-direction="top"].is-open {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg); 
}

.flip-button[data-direction="right"].is-open {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg); 
}

.flip-button[data-direction="bottom"].is-open {
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg); 
}

.flip-button[data-direction="left"].is-open {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg); 
}

flip-button.js

window.onload = function () {
    var element = document.getElementsByClassName('flip-button');
    if (element.length > 0) {
        var btn = document.querySelector('.flip-button');

        var btnFront = btn.querySelector('.flip-button-front'),
            btnYes = btn.querySelector('.flip-button-back .yes'),
            btnNo = btn.querySelector('.flip-button-back .no');

        btnFront.addEventListener('click', function (event) {
            var mx = event.clientX - btn.offsetLeft,
                my = event.clientY - btn.offsetTop;

            var w = btn.offsetWidth,
                h = btn.offsetHeight;

            var directions = [
                { id: 'top', x: w / 2, y: 0 },
                { id: 'right', x: w, y: h / 2 },
                { id: 'bottom', x: w / 2, y: h },
                { id: 'left', x: 0, y: h / 2 }
            ];

            directions.sort(function (a, b) {
                return distance(mx, my, a.x, a.y) - distance(mx, my, b.x, b.y);
            });

            btn.setAttribute('data-direction', directions.shift().id);
            btn.classList.add('is-open');
        });

        btnYes.addEventListener('click', function (event) {
            btn.classList.remove('is-open');
        });

        btnNo.addEventListener('click', function (event) {
            btn.classList.remove('is-open');
        });

        function distance(x1, y1, x2, y2) {
            var dx = x1 - x2;
            var dy = y1 - y2;
            return Math.sqrt(dx * dx + dy * dy);
        }
    }
};

index.html

<html>
	<head>
		<title>Ken Burns Effect</title>
		<link rel="stylesheet" type="text/css" href="kenburnseffect.css">
		<link rel="stylesheet" type="text/css" href="flip-button.css">
	</head>

	<body>
		<div class="pic-wrapper">
		  <figure class="pic-1"></figure>
		  <figure class="pic-2"></figure>
		  <figure class="pic-3"></figure>
		  <figure class="pic-4"></figure>
		</div>
		
		<div id="content">
			<div class="flip-button col-md-4">
            <div class="flip-button-back">
                <p>Are you sure you want to do this activity?</p>
                <button id="btnYesTransferGoals" class="yes">Yes</button>
                <button class="no">No</button>
            </div>
            <div class="flip-button-front">Save</div>
        </div>
		</div>
		
		<script type="text/javascript" src="flip-button.js"></script>
	</body>
</html>

kenburnseffect.css

@keyframes 
slideShow {  0% {
	 opacity: 0;
	 transform:scale(1) rotate(0.1deg);
	 -ms-transform:scale(1) rotate(0.1deg);
	}
	 5% {
	 opacity: 1
	}
	 25% {
	 opacity: 1;
	}
	 30% {
	 opacity: 0;
	 transform:scale(1.1) rotate(0.1deg);
	 -ms-transform:scale(1.1) rotate(0.1deg);
	}
	 100% {
	 opacity: 0;
	 transform:scale(1) rotate(0.1deg);
	 -ms-transformm:scale(1) rotate(0.1deg);
	}
}

@-o-keyframes 
slideShow {  0% {
	 opacity: 0;
	 -o-transform:scale(1);
	}
	 5% {
	 opacity: 1
	}
	 25% {
	 opacity: 1;
	}
	 30% {
	 opacity: 0;
	 -o-transform:scale(1.1);
	}
	 100% {
	 opacity: 0;
	 -o-transformm:scale(1);
	}
}

@-moz-keyframes 
	slideShow {  0% {
	 opacity: 0;
	 -moz-transform:scale(1);
	}
	 5% {
	 opacity: 1
	}
	 25% {
	 opacity: 1;
	}
	 30% {
	 opacity: 0;
	 -moz-transform:scale(1.1);
	}
	 100% {
	 opacity: 0;
	 -moz-transformm:scale(1);
	}
}

@-webkit-keyframes 
	slideShow {  0% {
	 opacity: 0;
	 -webkit-transform:scale(1);
	}
	 5% {
	 opacity: 1
	}
	 25% {
	 opacity: 1;
	}
	 30% {
	 opacity: 0;
	 -webkit-transform:scale(1.1);
	}
	 100% {
	 opacity: 0;
	 -webkit-transformm:scale(1);
	}
}

* {
  margin: 0;
  padding: 0;
}

.pic-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /*animation*/
  
  animation: slideShow 24s linear infinite 0s;
  -o-animation: slideShow 24s linear infinite 0s;
  -moz-animation: slideShow 24s linear infinite 0s;
  -webkit-animation: slideShow 24s linear infinite 0s;
}

.pic-1 {
  opacity: 1;
  background: url(pic1.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-2 {
  animation-delay: 6s;
  -o-animation-delay: 6s;
  -moz--animation-delay: 6s;
  -webkit-animation-delay: 6s;
  background: url(pic2.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-3 {
  animation-delay: 12s;
  -o-animation-delay: 12s;
  -moz--animation-delay: 12s;
  -webkit-animation-delay: 12s;
  background: url(pic3.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-4 {
  animation-delay: 18s;
  -o-animation-delay: 18s;
  -moz--animation-delay: 18s;
  -webkit-animation-delay: 18s;
  background: url(pic4.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}