clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション３選

※当サイトには一部宣伝が含まれます。

今回はclip path polygonを応用して2枚の画像を半々(三角形)で表示するCSSアニメーションをご紹介。それぞれに違ったエフェクトがついています。実務で使えます。まずは【見てください】
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。

この記事の目次

clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション

【ぼやけるアニメーション】clip path : polygon＋filter : blur
【美しいアニメーション】clip path : polygon＋filter : grayscale contrast saturate
【オーロラアニメーション】clip path : polygon＋filter : grayscale saturate hue-rotate

１. 【ぼやけるアニメーション】clip path : polygon＋filter : blur

動きは下の画像のような感じになります

実際の動きはこちら

コードはこちら

コードを見る

<div class="images">
  <div class="image-one"></div>
  <div class="image-two" ></div>
</div>

div {
  /* 要素全体の位置指定 */
  position: absolute;
  margin-left: 25%;
}
.image-one {
  /* 画像のサイズ指定 */
  width: 400px;
  height: 300px;
  /* 背景画像の指定 */
  background: url('https://images.unsplash.com/photo-1508402476522-c77c2fa4479d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80');
  /* 背景画像が繰り返さないように指定 */
  background-repeat:no-repeat;
  /* 背景画像が枠全体を覆うように指定 */
  background-size:cover;
  /* 背景画像を枠の真ん中に配置する */
  background-position:center;
  /* カーソル外した際のアニメーション速度調整 */
  transition: 1s;
    /* フィルターにてぼやけ度合いの調整 */
  filter: blur(3px);
}
.image-one:hover {
  /* フィルターにてぼやけ度合いの調整 */
  filter: blur(0);
  /* カーソルを乗せた際のアニメーション速度調整 */
  transition: 1s;
  /* .image-oneを画面いっぱいに広げる */
  z-index: 100;
}
.image-two {
  /* 画像の切り抜き調整 */
  clip-path: polygon(400px 0, 0% 300px, 400px 400px);
  /* 背景画像の指定 */
  background: url('https://images.unsplash.com/photo-1445297983845-454043d4eef4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80');
    /* 画像のサイズ指定 */
  width: 400px;
  height: 300px;
  /* 背景画像が繰り返さないように指定 */
  background-repeat:no-repeat;
  /* 背景画像が枠全体を覆うように指定 */
  background-size:cover;
  /* 背景画像を枠の下部に配置する */
  background-position:bottom;
  /* カーソル外した際のアニメーション速度調整 */
  transition: 1s;
  /* フィルターにてぼやけ度合いの調整 */
  filter: blur(3px);
}
.image-two:hover {
  /* フィルターにてぼやけ度合いの調整 */
  filter: blur(0);
    /* カーソルを乗せた際のアニメーション速度調整 */
  transition: 1s;
  /* .image-twoを画面いっぱいに広げる */
  clip-path: none;
}

ここがポイント！

重ね合わせる画像を2枚(image-one & image-two)指定
image-one & image-twoで背景画像の繰り返しなし(background-repeat)・枠内を覆う(background-size)指定
image-twoのみclip-path: polygonで画像を切り抜く(三角形に)＋background-position:bottomで下部に配置
filter：blur()で要素をぼやけさせる
transitionを指定することでhoverした際に滑らかなアニメーションを実現

２. 【美しいアニメーション】clip path : polygon＋filter : grayscale contrast saturate

動きは下の画像のような感じになります

実際の動きはこちら

コードはこちら

コードを見る

<div class="images">
  <div class="image-one"></div>
  <div class="image-two" ></div>
</div>

div {
  /* 要素全体の位置指定 */
  position: absolute;
  margin-left: 25%;
}
.image-one {
  /* 画像のサイズ指定 */
  width: 400px;
  height: 300px;
  /* 背景画像の指定 */
  background: url('https://images.unsplash.com/photo-1508402476522-c77c2fa4479d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80');
  /* 背景画像が繰り返さないように指定 */
  background-repeat:no-repeat;
  /* 背景画像が枠全体を覆うように指定 */
  background-size:cover;
  /* 背景画像を枠の真ん中に配置する */
  background-position:center;
  /* カーソル外した際のアニメーション速度調整 */
  transition: 1s;
  /* フィルターにて白黒・コントラスト・色彩調整 */
  filter: grayscale(.5) contrast(80%) saturate(100%);
}
.image-one:hover {
    /* フィルターにて白黒・コントラスト・色彩調整 */
  filter: grayscale(0) contrast(140%) saturate(160%);
    /* カーソルを乗せた際のアニメーション速度調整 */
  transition: 1s;
  /* .image-oneを画面いっぱいに広げる */
  z-index: 100;
}
.image-two {
  /* 画像の切り抜き調整 */
  clip-path: polygon(400px 0, 0% 300px, 400px 400px);
  /* 背景画像の指定 */
  background: url('https://images.unsplash.com/photo-1445297983845-454043d4eef4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80');
    /* 画像のサイズ指定 */
  width: 400px;
  height: 300px;
  /* 背景画像が繰り返さないように指定 */
  background-repeat:no-repeat;
  /* 背景画像が枠全体を覆うように指定 */
  background-size:cover;
  /* 背景画像を枠の下部に配置する */
  background-position:bottom;
  /* カーソル外した際のアニメーション速度調整 */
  transition: 1s;
    /* フィルターにて白黒・コントラスト・色彩調整 */
  filter: grayscale(.5) contrast(80%) saturate(100%);
}
.image-two:hover {
    /* フィルターにて白黒・コントラスト・色彩調整 */
  filter: grayscale(0) contrast(140%) saturate(120%);
    /* カーソルを乗せた際のアニメーション速度調整 */
  transition: 1s;
  /* .image-twoを画面いっぱいに広げる */
  clip-path: none;
}

ここがポイント！

重ね合わせる画像を2枚(image-one & image-two)指定
image-one & image-twoで背景画像の繰り返しなし(background-repeat)・枠内を覆う(background-size)指定
image-twoのみclip-path: polygonで画像を切り抜く(三角形に)＋background-position:bottomで下部に配置
filter：grayscale() contrast() saturate()で画像が美しく変化
transitionを指定することでhoverした際に滑らかなアニメーションを実現

３. 【オーロラアニメーション】clip path : polygon＋filter : grayscale saturate hue-rotate

動きは下の画像のような感じになります

実際の動きはこちら

コードはこちら

コードを見る

<div class="images">
  <div class="image-one"></div>
  <div class="image-two" ></div>
</div>

div {
  /* 要素全体の位置指定 */
  position: absolute;
  margin-left: 25%;
}
.image-one {
  /* 画像のサイズ指定 */
  width: 400px;
  height: 300px;
  /* 背景画像の指定 */
  background: url('https://images.unsplash.com/photo-1508402476522-c77c2fa4479d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80');
  /* 背景画像が繰り返さないように指定 */
  background-repeat:no-repeat;
  /* 背景画像が枠全体を覆うように指定 */
  background-size:cover;
  /* 背景画像を枠の真ん中に配置する */
  background-position:center;
  /* カーソル外した際のアニメーション速度調整 */
  transition: 0.1s;
  /* フィルターにて白黒・彩度・色相回転調整 */
  filter: grayscale(1) saturate(100%) hue-rotate(0deg);
}
.image-one:hover {
  /* フィルターにて白黒・彩度・色相回転調整 */
  filter: grayscale(0) saturate(150%) hue-rotate(1440deg);
    /* カーソルを乗せた際のアニメーション速度調整 */
  transition: 3s;
  /* .image-oneを画面いっぱいに広げる */
  z-index: 100;
}
.image-two {
  /* 画像の切り抜き調整 */
  clip-path: polygon(400px 0, 0% 300px, 400px 400px);
  /* 背景画像の指定 */
  background: url('https://images.unsplash.com/photo-1445297983845-454043d4eef4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80');
    /* 画像のサイズ指定 */
  width: 400px;
  height: 300px;
  /* 背景画像が繰り返さないように指定 */
  background-repeat:no-repeat;
  /* 背景画像が枠全体を覆うように指定 */
  background-size:cover;
  /* 背景画像を枠の下部に配置する */
  background-position:bottom;
  /* カーソル外した際のアニメーション速度調整 */
  transition: 0.1s;
  /* フィルターにて白黒・彩度・色相回転調整 */
  filter: grayscale(1) saturate(100%) hue-rotate(0deg);
}
.image-two:hover {
  /* フィルターにて白黒・彩度・色相回転調整 */
  filter: grayscale(0) saturate(120%) hue-rotate(1440deg);
    /* カーソルを乗せた際のアニメーション速度調整 */
  transition: 3s;
  /* .image-twoを画面いっぱいに広げる */
  clip-path: none;
}

ここがポイント！

重ね合わせる画像を2枚(image-one & image-two)指定
image-one & image-twoで背景画像の繰り返しなし(background-repeat)・枠内を覆う(background-size)指定
image-twoのみclip-path: polygonで画像を切り抜く(三角形に)＋background-position:bottomで下部に配置
filter：grayscale() saturate() hue-rotate()で画像がオーロラのように変化
transitionを指定することでhoverした際に滑らかなアニメーションを実現

追記

スライダーマテリアルデザインをコピペで！CSSアニメーション３選【コード解説付】
transitionとfilterで美しく変化するCSS画像エフェクト５選(基礎から応用まで)
こちらの記事を追加でご覧いただくことでよりWebデザインスキルの向上ができるかと思います

今回のマテリアルデザインとは一味違い本格的なアニメーションデザインなのでより一層楽しんでいただけるかと思います。