期待实现矩形径向擦除动画揭示

Question

I'm working on a full-width hero animation that would reveal an image/HTML div in a radial wipe manner. Here's what I have thus far: http://jsfiddle.net/andrewkerr/bjqSv/ - (code below) which is largely based these pieces: http://codepen.io/tmyg/pen/bwLom and http://css-tricks.com/css-pie-timer/ - The issue I'm running into is the fact that the image tiles because the animation splits the "pie" in half - I'm looking to perform the effect without having the image tile. I'm not opposed to a Javascript solution. Thanks.

//html
<div class="spinner-new">
  <span><em></em></span>
  <span><em></em></span>
</div>

//css
  .spinner-new {
  width: 100%;
  height: 400px;
  margin: 0 auto;
  position: relative;
  background:#3f9e35;
  overflow:hidden
}

.spinner-new span em {
  background-image:url('http://cdn.acidcow.com/pics/20100707/funny_family_photos_04.jpg');
    -webkit-animation-delay:1s;
    -webkit-animation-duration: 3s;
}

@-webkit-keyframes rotate-rt {
  0% {    -webkit-transform: rotate(0deg); }
  25% {   -webkit-transform: rotate(180deg); }
  50% {   -webkit-transform: rotate(180deg); }
  75% {   -webkit-transform: rotate(180deg); }
  100% {  -webkit-transform: rotate(180deg); }
}
@-webkit-keyframes rotate-lt {
  0% {    -webkit-transform: rotate(0deg); }
  25% {   -webkit-transform: rotate(0deg); }
  50% {   -webkit-transform: rotate(180deg); }
  75% {   -webkit-transform: rotate(180deg); }
  100% {  -webkit-transform: rotate(180deg); }
}

.spinner-new {
  position: relative;
}

.spinner-new span {
  width: 50%;
  height: 400%;
  overflow: hidden;
  position: absolute;
}

.spinner-new span:first-child {
  left: 0;
}

.spinner-new span:last-child {
  left: 50%;
}

.spinner-new span em {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.spinner-new span:first-child em {
  left: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-animation-name: rotate-lt; 
  -webkit-transform-origin: 0 12.5%;
}

.spinner-new span:last-child em {
  left: -100%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-animation-name: rotate-rt; 
  -webkit-transform-origin: 100% 12.5%;
 }

Answer 1

That is my solution.

CSS

@-webkit-keyframes span-left {
  0%      {   right: 0%; }
  24.999% {   right: 0%;}
  25% {  right: 50%;}
  100% { right: 50%;}
}

@-webkit-keyframes rotate-first {
  0%      {   right: 100%;
              -webkit-transform: rotate(0deg);  
              -webkit-transform-origin: right center; }
  24.999% {   right: 100%;
              -webkit-transform: rotate(180deg);  
              -webkit-transform-origin: right center; }
  25% {  right: 0%;
              -webkit-transform: rotate(180deg);  
              -webkit-transform-origin: right center; } 
  50% {  right: 0%;
              -webkit-transform: rotate(360deg);  
              -webkit-transform-origin: right center; } 
  100% { right: 0%;
              -webkit-transform: rotate(360deg);  
              -webkit-transform-origin: right center; }
}

@-webkit-keyframes rotate-last {
   0%     { -webkit-transform: rotate(0deg);   opacity: 0; }
  24.999% { -webkit-transform: rotate(180deg); opacity: 0;}
  25% { -webkit-transform: rotate(180deg); opacity: 1;}
  50% {   -webkit-transform: rotate(360deg); opacity: 1; }
  100% {  -webkit-transform: rotate(360deg); opacity: 1;}
}

.spinner-new {
  width: 400px;
  height: 300px;
  position: relative;
  overflow:hidden;
  position: relative;
  left: 50px;
  top: 20px;
}


.spinner-new span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}

.spinner-new span:first-child {
  right: 50%;
}

.spinner-new span:last-child {
  left: 50%;
}

.spinner-new span em {
  position: absolute;
  width: 100%;
  height: 100%;
}

.spinner-new span em,
.spinner-new span:first-child {
  -webkit-animation-duration: 30s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}
.spinner-new span:first-child {
    -webkit-animation-name: span-left;
}
.spinner-new span:first-child em {
  -webkit-animation-name: rotate-first;
  overflow: hidden;
}

.spinner-new span:last-child em {
  left: 0;
  -webkit-animation-name: rotate-last;
  -webkit-transform-origin: left center;
  -webkit-transform: rotate(204deg);
 }
.spinner-new span em:after {
  content: "";
  position: absolute;
  width: 200%;
  height: 100%;
  top: 0px;
  background-image:url('image.jpg');
  background-size: cover;
}

.spinner-new span:first-child em:after {
  left: 0px;
}

.spinner-new span:last-child em:after {
  right: 0px;
}

The most complex issue is reusing the splitted left element for the right hand beginning. I have to move the container to the left in the middle of the animation. The background image is set with cover, and all the size are in percentages, so this solution should be fully responsive

fiddle

The demo has the iteration count to infinite, so it is easier to see it going on.

Answer 2

May not be the most elegant way to accomplish this, but I ended up using CSS animations to reveal pie pieces gradually. Here's a link to the working example: http://jsfiddle.net/andrewkerr/dsTm6/ - code below

    //html
    <div class="wrapper">
        <div class="headline">Some really cool supporting text</div>
        <div class='shutter-1 first' style="left:400px;top:0px;"></div>
        <div class='shutter-2 fourth' style="left:400px;top:400px;"></div>
        <div class='shutter-1a third' style="left:400px;top:400px;"></div>
        <div class='shutter-3 seventh' style="left:0px;top:0px"></div>
        <div class='shutter second' style="left:400px;top:0px;"></div>
        <div class='shutter-2a sixth' style="left:0px;top:400px;"></div>
        <div class='shutter fifth' style="left:0px;top:400px;"></div>
        <div class='shutter-3a eighth' style="left:0px;top:0px"></div>
    </div>

    //css
        .wrapper {
        position:relative;
          background-image:url('main.jpg');

        width:800px;
        height:800px;
        margin:0px auto;
    }

    .shutter
    {
        position: absolute;
        width: 0; 
        height: 0; 
        width: 0px;
        height: 0px;
        border-left;150px solid transparent;
        border-bottom: 400px solid #e7e7e7;
        text-indent: -9999px;
        border-left-width: 400px;
        border-left-style: solid;
        border-left-color: transparent;
        -webkit-transform:rotate(360deg);
    }

    .shutter-1
    {
        position: absolute;
        width: 0; 
        height: 0; 
        width: 0px;
        height: 0px;
        border-right;150px solid transparent;
        border-top: 400px solid #e7e7e7;
        text-indent: -9999px;
        border-right-width: 400px;
        border-right-style: solid;
        border-right-color: transparent;
        -webkit-transform:rotate(360deg);
    }
    .shutter-1a
    {
        position: absolute;
        width: 0; 
        height: 0; 
        width: 0px;
        height: 0px;
        border-left;150px solid transparent;
        border-top: 400px solid #e7e7e7;
        text-indent: -9999px;
        border-left-width: 400px;
        border-left-style: solid;
        border-left-color: transparent;
        -webkit-transform:rotate(360deg);
    }
    .shutter-2
    {
        position: absolute;
        width: 0; 
        height: 0; 
        width: 0px;
        height: 0px;
        border-right;150px solid transparent;
        border-bottom: 400px solid #e7e7e7;
        text-indent: -9999px;
        border-right-width: 400px;
        border-right-style: solid;
        border-right-color: transparent;
        -webkit-transform:rotate(360deg);
    }
    .shutter-2a
    {
        position: absolute;
        width: 0; 
        height: 0; 
        width: 0px;
        height: 0px;
        border-right;150px solid transparent;
        border-top: 400px solid #e7e7e7;
        text-indent: -9999px;
        border-right-width: 400px;
        border-right-style: solid;
        border-right-color: transparent;
        -webkit-transform:rotate(360deg);
    }
    .shutter-3
    {
        position: absolute;
        width: 0; 
        height: 0; 
        width: 0px;
        height: 0px;
        border-top;150px solid transparent;
        border-left: 400px solid #e7e7e7;
        text-indent: -9999px;
        border-top-width: 400px;
        border-top-style: solid;
        border-top-color: transparent;
        -webkit-transform:rotate(360deg);
    }
    .shutter-3a
    {
        position: absolute;
        width: 0; 
        height: 0; 
        width: 0px;
        height: 0px;
        border-left;150px solid transparent;
        border-top: 400px solid #e7e7e7;
        text-indent: -9999px;
        border-left-width: 400px;
        border-left-style: solid;
        border-left-color: transparent;
        -webkit-transform:rotate(360deg);
    }


    @keyframes first
    {
        from {opacity: 1.0;}
        to {opacity: 0.0;}
    }

    @-moz-keyframes first /* Firefox */
    {
        from {opacity: 1.0;}
        to {opacity: 0.0;}
    }

    @-webkit-keyframes first /* Safari and Chrome */
    {
        from {opacity: 1.0 ;}
        to {opacity: 0.0;}
    }

    @-o-keyframes first /* Opera */
    {
        from {opacity: 1.0;}
        to {opacity: 0.0;}
    }
    .first
    {
        animation: first 1s;
        animation-delay: .08s;
        animation-fill-mode: forwards;
        -moz-animation: first 1s; /* Firefox */
        -moz-animation-delay: .08s;
        -moz-animation-fill-mode: forwards;
        -webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
        -webkit-animation-fill-mode: forwards;
        -webkit-animation-delay: .08s;
        -o-animation: first 1s; /* Opera */
        -o-animation-delay: .08s;
        -o-animation-fill-mode: forwards;
    }
    .second
    {
        animation: first 1s;
        animation-delay: 1.0s;
        animation-fill-mode: forwards;
        -moz-animation: first 1s; /* Firefox */
        -moz-animation-delay: 1s;
        -moz-animation-fill-mode: forwards;
        -webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
        -webkit-animation-fill-mode: forwards;
        -webkit-animation-delay: 1s;
        -o-animation: first 1s; /* Opera */
        -o-animation-delay: 1s;
        -o-animation-fill-mode: forwards;
    }
    .third
    {
        animation: first 1s;
        animation-delay: 1.05s;
        animation-fill-mode: forwards;
        -moz-animation: first 1s; /* Firefox */
        -moz-animation-delay: 1.05s;
        -moz-animation-fill-mode: forwards;
        -webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
        -webkit-animation-delay: 1.05s;
        -webkit-animation-fill-mode: forwards;
        -o-animation: first 1s; /* Opera */
        -o-animation-delay: 1.05s;
        -o-animation-fill-mode: forwards;
    }
    .fourth
    {
        animation: first 1s;
        animation-delay: 1.2s;
        animation-fill-mode: forwards;
        -moz-animation: first 1s; /* Firefox */
        -moz-animation-delay: 1.2s;
        -moz-animation-fill-mode: forwards;
        -webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
        -webkit-animation-delay:1.2s;
        -webkit-animation-fill-mode: forwards;
        -o-animation: first 1s; /* Opera */
        -o-animation-delay: 1.2s;
        -o-animation-fill-mode: forwards;
    }
    .fifth
    {
        animation: first 1s;
        animation-delay: 1.4s;
        animation-fill-mode: forwards;
        -moz-animation: first 1s; /* Firefox */
        -moz-animation-delay: 1.4s;
        -moz-animation-fill-mode: forwards;
        -webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
        -webkit-animation-fill-mode: forwards;
        -webkit-animation-delay: 1.4s;
        -o-animation: first 1s; /* Opera */
        -o-animation-delay: 1.4s;
        -o-animation-fill-mode: forwards;
    }
    .sixth
    {
        animation: first 1s;
        animation-delay: 1.5s;
        animation-fill-mode: forwards;
        -moz-animation: first 1s; /* Firefox */
        -moz-animation-delay: 1.5s;
        -moz-animation-fill-mode: forwards;
        -webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
        -webkit-animation-fill-mode: forwards;
        -webkit-animation-delay: 1.5s;
        -o-animation: first 1s; /* Opera */
        -o-animation-delay: 1.5s;
        -o-animation-fill-mode: forwards;
    }
    .seventh
    {
        animation: first 1s;
        animation-delay: 1.6s;
        animation-fill-mode: forwards;
        -moz-animation: first 1s; /* Firefox */
        -moz-animation-delay: 1.6s;
        -moz-animation-fill-mode: forwards;
        -webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
        -webkit-animation-delay: 1.6s;
        -webkit-animation-fill-mode: forwards;
        -o-animation: first 1s; /* Opera */
        -o-animation-delay: 1.6s;
        -o-animation-fill-mode: forwards;
    }
    .eighth
    {
        animation: first 2s;
        animation-delay: 1.7s;
        animation-fill-mode: forwards;
        -moz-animation: first 2s; /* Firefox */
        -moz-animation-delay: 1.7s;
        -moz-animation-fill-mode: forwards;
        -webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
        -webkit-animation-delay: 1.7s;
        -webkit-animation-fill-mode: forwards;
        -o-animation: first 2s; /* Opera */
        -o-animation-delay: 1.7s;
        -o-animation-fill-mode: forwards;
    }
    .headline {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size:36px;
        text-align: center;
        color:#fff;
        padding-top:300px;
        width:300px;
        margin: 0 auto;
    }