CSS Reveal from Corner Animation

CSS reveal from corner animation

A simple example accomplishing this effect with no javascript:

https://jsfiddle.net/freer4/j2159b1e/2/

html, body{  height:100%;  width:100%;  margin:0;  padding:0;}.banners {  position:relative;  background:#000;  width: 100%;  height: 100%;  overflow:hidden;}.banners input{  display:none;}.slide1{  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5T6nwVYWsbzLcLF-JNxnGXFFFwkZMBcCMbaqeTevuldkxHg0N);}.slide2{  background-image:url(http://www.rd.com/wp-content/uploads/sites/2/2016/02/06-train-cat-shake-hands.jpg);}.slide3{  background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKr6YlGNsqgJzvgBBkq1648_HsuDizVn_ZXC6iQp9kjXFzLvs1BA);}.image {  display:block;  height:100%;  width:100%;  position: absolute;  overflow:hidden;  z-index:1;  text-align:center;  background-position:0 0;  background-size:cover;  transition:z-index 1s step-end;  clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);  animation-duration: 2s;  animation-name: clipout;}input:checked + .image{  z-index:3;  transition:z-index 1s step-end;  clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0);  animation-duration: 2.2s;  animation-name: clipin;  cursor:default;}.image:nth-child(2),input:checked + * + * + .image{  z-index:2;  cursor:pointer;}

.content{  color:#FFF;  display:inline-block;  vertical-align:middle;  font-family:arial;  text-transform:uppercase;  font-size:24px;  opacity:0;  transition:0s opacity 1s;}input:checked + .image .content{  opacity:1;  transition:0.8s opacity 0.8s;}.spanner{  vertical-align:middle;  width:0;  height:100%;  display:inline-block;}
@keyframes clipout {  from { clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0); }  50%  { clip-path: polygon(100% 0, 100% -100%, -100% 100%, 0 100%, 0 0); }  51%   { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }  to   { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }}@keyframes clipin{  from { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }  50%  { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }  to   { clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0); }  }

<div class="banners">  <input type="radio" id="slide1" name="slides" checked="checked" />  <label class="image slide1" for="slide1">    <div class="content">      Slide 1    </div>    <div class="spanner"></div>  </label>  <input type="radio" id="slide2" name="slides"  />  <label class="image slide2" for="slide2">    <div class="content">      Slide 2    </div>    <div class="spanner"></div>  </label>  <input type="radio" id="slide3" name="slides"  />  <label class="image slide3" for="slide3">    <div class="content">      Slide 3    </div>    <div class="spanner"></div>  </label></div>

Using css animation to make a div element move to each corner of the page

Easier idea using background with no complex keyframes:

.box {
  background:
    radial-gradient(farthest-side,black 97%,transparent) 
    top left/100px 100px /* simply adjust the values here to control the size of the circle */
    no-repeat;
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  animation: move 4s infinite;
}

@keyframes move {
  25% { background-position: bottom left  }
  50% { background-position: bottom right }
  75% { background-position: top    right }
}

<div class="box"></div>

Animate a div to reveal absolutely positioned content using CSS and/or jQuery

Boom. There ya go

.test {
  position: relative;
  width: 2rem;
  height: 2rem;
  background: rgba(white, 0.5);
  animation: test-grow 5s forwards;
  overflow:hidden;
}

h1 {
  font-family: Helvetica Neue, Helvetica, Arial;
  font-weight: bold;
  font-size: 200px;
  position: absolute;
  top:  18rem;
  left: 28rem;
}

How to animate a pop up on show and close using css?

You can try achieve this with by css variables calculation, position: absolute and a separate .active class for each element.

let isOpen = false;
  
$('.child').on('click', function() {
  if (!isOpen) {
    $('.child').removeClass('active');
    $(this).addClass('active');
    isOpen = true;
  } else {
    $(this).removeClass('active');
    isOpen = false;
  }
});

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --parent-width: 400px;
  --parent-height: 600px;
  --gap: 20px;
}
.parent {
  margin: 40px auto;
  width: var(--parent-width);
  height: var(--parent-height);
  border: 1px solid #3b3b3b;
  border-radius: 20px;
  position: relative;
}

.child {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.5s ease-in;
  position: absolute;
  height: calc((var(--parent-height) / 2) - (var(--gap) * 2));
  width: calc((var(--parent-width) / 2) - (var(--gap) * 3));
}

/* Init size */
.child:nth-child(1) {
  top: var(--gap); /* padding top 20px */
  left: calc(var(--gap) * 2); /* padding left 40px */
}
.child:nth-child(2) {
  top: var(--gap);
  right: calc(var(--gap) * 2); /* padding right 40px */
}
.child:nth-child(3) {
  bottom: var(--gap); /* padding bottom 20px */
  left: calc(var(--gap) * 2); /* padding left 40px */
}
.child:nth-child(4) {
  bottom: var(--gap);
  right: calc(var(--gap) * 2);
}

/* Full size */
.child:nth-child(1).active {
  top: 0;
  left: 0;
}
.child:nth-child(2).active {
  top: 0;
  right: 0;
}
.child:nth-child(3).active {
  bottom: 0;
  left: 0;
}
.child:nth-child(4).active {
  bottom: 0;
  right: 0;
}

.child.active {
  width: 100%;
  height: 100%;
  z-index: 10;
  border: 1px solid red;
  background: #000;
  border-radius: 20px;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

CSS animation, absolute position go off screen to right and come back from left

Here's the solution I proposed in the comments before:

You can make an initial cloud (.initalCloud) that just slides out of the screen and gets replaced with the regular .firstCloud afterwards.

.clouds {  position: relative;  overflow: hidden;  height: 400px;}
.initialCloud {  position: absolute;  left: 100%;  top: 150px;  animation: moveFirst 5s linear .2s;  animation-iteration-count: 1;  width: 150px;}
.firstCloud {  position: absolute;  left: -30%;  top: 150px;  animation: move 5s linear 5s infinite;  width: 150px;}
.secondCloud {  position: absolute;  left: -30%;  top: 200px;  animation: move 8s linear 0s infinite;  width: 150px;}
.thirdCloud {  top: 250px;  left: -30%;  position: absolute;  animation: move 11s linear 1s infinite;  width: 150px;}
@-webkit-keyframes move {  from {    left: -30%;  }  to {    left: 100%;  }}
@-webkit-keyframes moveFirst {  from {    left: 50%;  }  to {    left: 100%;  }}

<div class="clouds">  <div class="initialCloud">    <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164"><defs><style>.cloud1Fill{fill:#d1dbd9;}</style></defs><title>Untitled-5</title><path class="cloud1Fill" d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z"/></svg>  </div>  <div class="firstCloud">    <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164"><defs><style>.cloud1Fill{fill:#d1dbd9;}</style></defs><title>Untitled-5</title><path class="cloud1Fill" d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z"/></svg>  </div>  <div class="secondCloud">    <svg id="svgCloud2" data-name="cloud2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291 124"><defs><style>.cloud1Fill{fill:#d3dddb;}.cloud2Fill{fill:#fff;}</style></defs><title>Untitled-4</title><path class="cloud1Fill" d="M2.29,123.5A41,41,0,0,1,58.37,74.12l.32.14.24-.25A45.72,45.72,0,0,1,91.5,60.5q1.14,0,2.25.06l.43,0,.09-.41a76,76,0,0,1,148.46,0l.09.4h.41l1.27,0a46.06,46.06,0,0,1,46,46,45.53,45.53,0,0,1-3.26,17Z"/><path class="cloud2Fill" d="M168.5,1a75.53,75.53,0,0,1,73.74,59.23l.18.81.82,0,1.26,0a45.49,45.49,0,0,1,42.4,62H2.66A40.53,40.53,0,0,1,58.17,74.57l.63.29.49-.49A45.2,45.2,0,0,1,91.5,61c.75,0,1.5,0,2.23.06l.85,0,.18-.83A75.51,75.51,0,0,1,168.5,1m0-1A76.52,76.52,0,0,0,93.78,60.06Q92.66,60,91.5,60A46.35,46.35,0,0,0,58.58,73.66,41.52,41.52,0,0,0,1.92,124H287.58A46.5,46.5,0,0,0,244.5,60l-1.28,0A76.53,76.53,0,0,0,168.5,0Z"/></svg>  </div>  <div class="thirdCloud">    <svg id="svgClouds3" data-name="clouds2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 329 139"><defs><style>.cloud2Fill{fill:#d1dbd9;}</style></defs><title>Untitled-6</title><path class="cloud2Fill" d="M329,125a40.09,40.09,0,0,1-2.52,14H14.9A61.28,61.28,0,0,1,0,99C0,64.21,29.33,36,65.5,36a67.34,67.34,0,0,1,30,7A86,86,0,0,1,236.42,31.37,55.53,55.53,0,0,1,311,83.5a56.67,56.67,0,0,1-.55,7.75A39.93,39.93,0,0,1,329,125Z"/></svg>  </div></div>

How to (animated) scale out from center instead of from the left side

This snippet assumes that you want to reserve the space for the expanded image from the start - ie so that its expanding does not alter the position of surrounding elements.

It replaces the img element with a div of the appropriate size and attaches a pseudo element to that which has the required image as background and which animates on the X axis from scale 0 to full size. This makes the image expand from the center rather than the left.

.expandimg {
  width: 500px;
  height: 250px;
  position: relative;
}

div::before {
  content: '';
  animation: scale 0.5s;
  background-image: url(https://cdn.pixabay.com/photo/2020/04/01/01/02/science-4989678_960_720.png);
  background-size: cover;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  position: absolute;
  width: 100%;
  height: 100%;
  display: inline-block;
}

@keyframes scale {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(100%);
  }
}

<div class="expandimg"></div>

How to make a shape grow from the bottom up in CSS animations, and set the animation using a CSS variable

1. To add the animation as a variable: You cannot pass in a setting like include_animation:true, however what we can do is pass in a valid value for the animation property and use it.

We could create a variable e.g. --animation and set its value to the animation we want to run, e.g. --animation:move-me-up. This means you need to specify the exact name of the animation, so it might be easier to run the animation by default, and set the variable to none to prevent the animation from running, e.g.:

.tank {
    /* move-me-up is the default animation. 
       Set --animation to "none" for no animation, 
       or you could even set another animation name */
    animation-name: var(--animation, move-me-up);
    animation-duration: 5s;
    /* Rest of the CSS... */
}

You can see this working in the example in the next section.

---

2. Getting the animation to work: The reason you can't see the animation in your jsfiddle, is because the CSS for .tank:after is showing the full tank so the animation is being hidden. You can see it working if you remove this line from the CSS:

.tank:after {
    /* other CSS.. */
    background-color:var(--c,#444); /* Remove this line */
}

However now the animation will start at the top and grow down the height of the full element is changing and it will expand down by default, so we need to do step 3.

---

3. Make the animation "grow" from the bottom We can do this quite easily in the keyframes, by making the value for top the same as bottom at the start and having it finish at top:0:

@keyframes move-me-up {
  0% {
    height: 0;
    top: var(--h,2px);   /* the top of the tank starts at the bottom */
  }
  100% {
    height: var(--h,2px);  
    top: 0;              /* when it finishes, top is at 0 (i.e. the top of the parent) */
  }
}

Working Example of tank growing from the bottom, and also setting no animation using a variable

.tank {
    position:relative;
    width:12px;
    height: var(--h,2px);
    background-color:var(--c,#444); 
    opacity: 0.85;
    -moz-border-radius: 6px / 2.5px;
    -webkit-border-radius: 6px / 2.5px;
    border-radius: 6px / 2.5px;
    box-shadow:0px 0px 10px rgba(0, 0, 0, 0.75);

    /* ADD THE ANIMATION. 
    move-me-up is the default animation. 
    set --animation to "none" for no animation, 
    or you could even set another animation name */
    animation-name: var(--animation, move-me-up);
    animation-duration: 5s;
}

.tank:before {
    width: 12px;
    height: 5px;
    background-color:var(--s,#666);
    -moz-border-radius: 6px / 2.5px;
    -webkit-border-radius: 6px / 2.5px;
    border-radius: 6px / 2.5px;
    position:absolute;
    content:'';
    top:-2.5px;
}

.tank:after {
    width: 12px;
    height: var(--h,2px);
    -moz-border-radius: 6px / 2.5px;
    -webkit-border-radius: 6px / 2.5px;
    border-radius: 6px / 2.5px;
    position:absolute;
    content:'';
    top:1px;
    z-index: -1;      
}

@keyframes move-me-up {
  0% {
    height: 0;
    top: var(--h,2px);
    box-shadow:0px 0px 10px rgba(0, 0, 0, 0.75);
  }
 
  100% {
    height: var(--h,2px); 
    top: 0;
  }
}

/* for displaying the example only */
.tank { float:left; margin-right: 50px; }

<div class="tank" style="--h:120px;--c:#186b05;--s:#50d135;"></div>

<div class="tank" style="--h:120px;--c:#186b05;--s:#50d135; --animation:none"></div>

CSS Animation from Left to Right

Since this question is still getting alot of attention and none of the soulotions yet provide the full answer that I was trying to achieve, I'll give an example how I solved it some years ago.

First to make the animation go left to right, like many other questions have showed:

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 0;    
  }
}

<div id="pot">
  <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>  

---

Related Topics