アニメーション動き | ベンツ・輸入車・国産車の新車・中古車販売・買取・カスタム｜FOR PRIDE.inc

.big_up_img を　.big_up_img_wrapで囲んで利用する

.hover_big_img_maru を　big_img_box_maruで囲んでも同じだが、読みにくいので今後は使わない、一応クラスは書いてあるが。

<div class="big_up_img_wrap">
<img class="maru_img big_up_img" src="/wp-content/themes/newD/1_img/thum/thum_box.svg" alt="" width="300" height="300" />
</div>

旧
<div class="big_img_box_maru">
<img class="maru_img hover_big_img_maru" src="/wp-content/themes/newD/1_img/thum/thum_box.svg" alt="" width="300" height="300" /> </div>

<div class="big_up_img_wrap">
<img class="big_up_img" src="/wp-content/themes/newD/1_img/thum/thum_box.svg" alt="" width="300" height="300" />
</div>

キラキラスタイル　光　動き

ワセダのタイトル背景赤で全体キラ

 

.kira{    position    :relative;
    overflow    :hidden;
    
    img{ width: 100%; margin-bottom: 1%;
        
    @media screen and (max-width: 736px){
        margin-bottom: 1%;
    margin-top: 0%;
        
        }//@media screen 736px
    }

}

.reflection {
    height      :100%;
    width       :30px;
    position    :absolute;
    top         :-180px;
    left        :0;
    background-color: #fff;
    opacity     :0;
    transform: rotate(45deg);
 //一度だけにしたい場合はinfiniteを消す 回数指定は2など
    animation: reflection 3s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 3s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 3s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 3s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -o-animation: reflection 3s ease-in-out infinite;
}
 
@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(100) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(100) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
    0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -moz-transform: scale(100) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
    0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
    0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -o-transform: scale(100) rotate(45deg); opacity: 0; }
}

<div class="d_title_width kira"  >

    
    <img src="<?php echo get_template_directory_uri(); ?>/1_img/9_client/3_waseda/aj3.svg" style=""
     >
    
    <div class="reflection"></div>
    
</div>