CSSアニメーション - 虫めがねのアイコンを十字に変える

Question

CSSのアニメーションで十字アイコンに虫めがねのトランジションを作成しようとしています。私がアニメーションで作業しているのは初めてで、ハンドルを虫めがねの下に置く方法はわかりません。ここにはfiddleがあります。これはオリジナルのdemoです。 これはhtmlです：

<div id="magnifier"> 

    <div class="magnifier-icon"> 
    <span class="magnifier-handle"></span> 
    <span class="magnifier-handle-x"></span> 
    </div> 
</div> 

そして、これはCSSです：

// vars 
$color-white: #fff;  // icon color 
$color-bg: #b0e1be; // background color 
$animation: .5s; // animation speed 
$scale: 0.1;    // icon scale 68/68 default 

$dimensions-open: 28px; 
$dimensions-close: 36px; 


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

// spacing + background-color 
body { 
    background: $color-bg; 
    padding: 40px; 
    font-family: roboto, sans-serif; 
} 

.magnifier-icon { 
    display: block; 
    position: relative; 
    cursor: pointer; 
    opacity: 1; 
    transition: opacity 2s; 

    &:before { 
    content: ""; 
    display: block; 
    border: 3px solid $color-white; 

    width: $dimensions-open; 
    height: $dimensions-open; 
    border-radius: $dimensions-open*.5; 

    animation: open $animation ease 0s 1 forwards; 
    } 

    &.is-open:before {  
    animation: close $animation*.5 ease $animation*.5 1 forwards; 
    } 
} 

.magnifier-handle, 
.magnifier-handle-x { 
    content: ""; 
    display: block; 
    width: 25px; 
    height: 3px; 
    transform: rotate(45deg); 
    background: $color-white; 
    position: absolute; 
    top: 85px; 
    left: 45px; 
    animation: x-stroke-out $animation ease 0s 1 forwards; 

    .is-open & { 
    animation: x-stroke-in $animation ease 0s 1 forwards; 
    } 
} 
.magnifier-handle-x { 
    animation: x-stroke-turn-out $animation ease 0s 1 forwards; 
    .is-open & { 
    animation: x-stroke-turn $animation ease 0s 1 forwards; 
    } 
} 

@keyframes close { 
    0% { border-radius: $dimensions-open*.5; width: $dimensions-open; height: $dimensions-open; } 
    80% { border-radius: $dimensions-close*.5; width: $dimensions-close; height: $dimensions-close; } 
    100% { border-radius: $dimensions-close*.5; width: $dimensions-close; height: $dimensions-close; } 
} 
@keyframes open { 
    0% { border-radius: $dimensions-close*.5; width: $dimensions-close; height: $dimensions-close; } 
    20% { border-radius: $dimensions-close*.5; width: $dimensions-close; height: $dimensions-close; } 
    100% { border-radius: $dimensions-open*.5; width: $dimensions-open; height: $dimensions-open; } 
} 

@keyframes x-stroke-in { 
    0% { top: 45px; left: 35px; } 
    80% { top: 33px; left: 15px; width: 40px; height: 4px; } 
    100% { top: 33px; left: 15px; width: 40px; height: 4px; } 
} 
@keyframes x-stroke-out { 
    100% { top: 45px; left: 35px; } 
    30% { top: 33px; left: 15px; width: 40px; height: 4px; } 
    0% { top: 33px; left: 15px; width: 40px; height: 4px; } 
} 

@keyframes x-stroke-turn { 
    0% { top: 45px; left: 35px; } 
    70% { top: 33px; left: 15px; height: 4px; transform: rotate(45deg); } 
    85% { transform: rotate(145deg); } 
    100% { top: 33px; left: 15px; height: 4px; width: 40px; transform: rotate(135deg); } 
} 
@keyframes x-stroke-turn-out { 
    100% { top: 45px; left: 35px; } 
    30% { top: 33px; left: 15px; height: 4px; transform: rotate(45deg); } 
    15% { transform: rotate(145deg); } 
    0% { top: 33px; left: 15px; height: 4px; width: 40px; transform: rotate(135deg); } 
} 

私は、私がtopとleftプロパティmagnifier-handle-xの値を変更して試してみましたが、それがなかったことを行うことができますどのように助けて。

Answer 1

@keyframesの一部を、更新されたフィドルhttps://jsfiddle.net/j624wsas/16/に従って変更してください。