Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width">
- <title>JS Bin</title>
- <style id="jsbin-css">
- @-webkit-keyframes left {
- 0% {
- height: 20px;
- top: 30px;
- }
- 30% {
- height: 80px;
- top: 0;
- }
- 100% {
- height: 100%;
- top: 0;
- }
- }
- @-webkit-keyframes top {
- 100% {
- width: 200px;
- }
- }
- @-webkit-keyframes bottom {
- 100% {
- width: 200px;
- }
- }
- @-webkit-keyframes right {
- 100% {
- height: 100%;
- }
- }
- #test {
- width: 200px;
- height: 300px;
- background: purple;
- position: relative;
- }
- #test .content {
- width: calc(100% - 4px);
- height: calc(100% - 4px);
- display: inline-block;
- background: pink;
- margin: 2px;
- }
- .border {
- display: inline-block;
- position: absolute;
- background: yellow;
- }
- .left {
- width: 2px;
- height: 20px;
- top: 30px;
- left: 0;
- }
- #test:hover .left {
- animation: left 1s 1 linear;
- -webkit-animation-fill-mode: forwards;
- }
- .top {
- width: 0px;
- height: 2px;
- top: 0;
- left: 0;
- }
- #test:hover .top {
- animation: top 0.7s 0.3s 1 linear;
- -webkit-animation-fill-mode: forwards;
- }
- .right {
- width: 2px;
- height: 0px;
- top: 0;
- right: 0;
- }
- #test:hover .right {
- animation: right 1s 1s 1 linear;
- -webkit-animation-fill-mode: forwards;
- }
- .bottom {
- width: 0px;
- height: 2px;
- bottom: 0;
- left: 0;
- }
- #test:hover .bottom {
- animation: bottom 1s 1s 1 linear;
- -webkit-animation-fill-mode: forwards;
- }
- body {
- background: #fff;
- }
- </style>
- </head>
- <body>
- <div id="test">
- <div class="top border"></div>
- <div class="left border"></div>
- <div class="right border"></div>
- <div class="bottom border"></div>
- <div class="content"></div>
- </div>
- <script id="jsbin-source-css" type="text/css">@-webkit-keyframes left {
- 0% {
- height: 20px;
- top: 30px;
- }
- 30% {
- height: 80px;
- top: 0;
- }
- 100% {
- height: 100%;
- top: 0;
- }
- }
- @-webkit-keyframes top {
- 100% {
- width: 200px;
- }
- }
- @-webkit-keyframes bottom {
- 100% {
- width: 200px;
- }
- }
- @-webkit-keyframes right {
- 100% {
- height: 100%;
- }
- }
- #test {
- width: 200px;
- height: 300px;
- background: purple;
- position: relative;
- }
- #test .content {
- width: calc(100% - 4px);
- height: calc(100% - 4px);
- display: inline-block;
- background: pink;
- margin: 2px;
- }
- .border {
- display: inline-block;
- position: absolute;
- background: yellow;
- }
- .left {
- width: 2px;
- height: 20px;
- top: 30px;
- left: 0;
- }
- #test:hover .left {
- animation: left 1s 1 linear;
- -webkit-animation-fill-mode: forwards;
- }
- .top {
- width: 0px;
- height: 2px;
- top: 0;
- left: 0;
- }
- #test:hover .top {
- animation: top 0.7s 0.3s 1 linear;
- -webkit-animation-fill-mode: forwards;
- }
- .right {
- width: 2px;
- height: 0px;
- top: 0;
- right: 0;
- }
- #test:hover .right {
- animation: right 1s 1s 1 linear;
- -webkit-animation-fill-mode: forwards;
- }
- .bottom {
- width: 0px;
- height: 2px;
- bottom: 0;
- left: 0;
- }
- #test:hover .bottom {
- animation: bottom 1s 1s 1 linear;
- -webkit-animation-fill-mode: forwards;
- }
- body {
- background: #fff;
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement