DBSilk wrote Thanks, Osgood. But I don't understand the animation well enough to extend it to the column widths-- I would need someone's help. |
Below is a quick demo which animates the left and right columns:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Animate</title>
<style>
body {
font-family: helvetica, verdana sans-serif;
}
*{
box-sizing: border-box;
}
img {
max-width: 100%;
}
.wrapper {
display: flex;
flex-wrap: wrap;
width: 57%;
margin: 0 auto;
background-color: #000;
padding: 60px 0 0 0;
}
@media screen and (max-width: 768px) {
.wrapper {
width: 100%;
background-color: red;
}
}
.left {
text-align: center;
color: #fff;
padding: 0 0 0 50px;
width: 50%;
}
@media screen and (max-width: 768px) {
.left {
width: 100%;
}
}
.left p {
margin: 0;
padding: 0;
font-size: 16px;
line-height: 26px
}
.right {
text-align: center;
color: #fff;
width: 50%;
}
@media screen and (max-width: 768px) {
.right {
width: 100%;
padding: 30px 0;
}
}
</style>
<style>
.zoom {
-webkit-animation: zoomer 2s;
animation: zoomer 2s;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
transform-origin: top right;
}
.right {
animation: right_col 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.left {
animation: left_col 3s;
transform-origin: top left;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes zoomer {
100% {
transform: scale(1);
}
}
@-webkit-keyframes right_col {
0% {
width: 50%;
}
50% {
width: 50%;
}
100% {
width: 70%;
}
}
@media screen and (max-width: 768px) {
@-webkit-keyframes right_col {
0% {
width: 100%;
}
100% {
width: 100%;
}
}
}
@-webkit-keyframes left_col {
0% {
width: 50%;
}
50% {
width: 50%;
}
100% {
width: 30%;
}
}
@media screen and (max-width: 768px) {
@-webkit-keyframes left_col {
0% {
width: 100%;
}
100% {
width: 100%;
}
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- end left -->
<div class="right" >
<img src="http://dominiquebello.com/images/ContactImage/1.jpg" alt="" class="zoom">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
<!-- end right -->
</div>
<!-- end wrapper -->
</body>
</html>
1 Correct answer
31
Replies
AdChoices