與CSS3動畫擴界

我試圖使它所以當頁面加載顯示圓圈這是很好的，但我需要他們從中心向外不是從左上角的成長，所以從小到大：與CSS3動畫擴界

你可以看到我目前在這裏：http://thomasbritton.co.uk/projects/ebrd/

理想情況下，想要在CSS中完成，但如果它更容易/更穩定可以使用JS。

任何想法？

這裏是我的CSS也爲動畫部分：

.circle a { 
    border-radius: 150px; 
    color: #fff; 
    height: 0; 
    position: absolute; 
    text-decoration: none; 
    width: 0; 
} 

.circle a.grow { 
    -webkit-animation-name: grow; 
    -webkit-animation-duration: 2.2s; 
    -webkit-animation-timing-function: ease; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-direction: normal; 
    -webkit-animation-delay: 0; 
    -webkit-animation-play-state: running; 
    -webkit-animation-fill-mode: forwards; 

    -moz-animation-name: grow; 
    -moz-animation-duration: 2.2s; 
    -moz-animation-timing-function: ease; 
    -moz-animation-iteration-count: 1;  
    -moz-animation-direction: normal; 
    -moz-animation-delay: 0; 
    -moz-animation-play-state: running; 
    -moz-animation-fill-mode: forwards; 

    animation-name: grow; 
    animation-duration: 2.2s; 
    animation-timing-function: ease; 
    animation-iteration-count: 1; 
    animation-direction: normal; 
    animation-delay: 0; 
    animation-play-state: running; 
    animation-fill-mode: forwards; 
} 

@-webkit-keyframes grow { 
    0% { -moz-transform: scale(0); } 
    100% { -moz-transform: scale(1); } 
} 

@-moz-keyframes grow { 
    0% { -moz-transform: scale(0); } 
    100% { -moz-transform: scale(1); height: 168px; width: 168px; } 
} 

@keyframes grow { 
    0% { -moz-transform: scale(0); } 
    100% { -moz-transform: scale(1); } 
}

來源

2012-02-16 thomasbritton

我可以看到他們增長，但他們沒有fixzd中心。 – sinsedrix 2012-02-16 23:24:56

@sinsedrix我該如何應用固定中心？ – thomasbritton 2012-02-16 23:27:03

您需要製作圓圈'位置：相對'併爲其頂部和左側屬性以及寬度和高度設置動畫。另外，對非Firefox用戶的說明：使用Firefox查看完整效果。 – Bojangles 2012-02-16 23:33:18

下面是你需要做的粗例如：jsfiddle.net/UxtJV/。它使用一些JS來添加一個類來爲該圓圈設置動畫。這是width,height,top和left屬性是動畫，它給出position: relative。

div.circle { 
    position: relative; 

    width: 0px; 
    height: 0px; 
    top: 50px; 
    left: 50px; 

    -webkit-transition-duration: 2s; 
    -webkit-transition-property: all; 
    -webkit-transition-timing-function: ease-in-out; 

    text-align: center; 
    background: red; 
    color: white; 
    border-radius: 100%; 
    padding: 20px; 
    overflow: hidden; 
} 

div.circle.open { 
    top: 0px; 
    left: 0px; 
    width: 100px; 
    height: 100px; 
}

來源

2012-02-16 23:43:45 Bojangles

要做到這一點，你的動畫應該包括：

增加寬度和高度。
增加頂部和左側。

這是一項工作，但它應該完全按照你的要求進行。

來源

2012-02-16 23:28:03

您可以嘗試將您的動畫與翻譯屬性相結合。

這可能是另一種選擇：

transform-origin: top right; /* 50% 50% or whatever*/

張貼here ......

來源

2012-02-16 23:34:39 Maroshii

這看起來應該起作用，但似乎沒有做任何事情。試圖在選擇器中放入動畫幀和標準選項 – thomasbritton 2012-02-17 00:33:47

萬一有人正在尋找工作的jQuery的解決方案，這是...

HTML

<div class=circle1></div>

CSS

.circle1 { 
    position:absolute; top:50px; left:50px; 
    width: 0px; height: 0px; 
    border:1px solid red; 
    padding:20px; 
    border-radius:50%; 
}

$(".circle1").mouseover(function() { 
     $(this).animate({top:"0", left:"0", width:"100px", height:"100px", opacity: 0}, 200); 
}).mouseout(function() { 
     $(this).animate({top:"50px", left:"50px", width:"0", height:"0", opacity: 1}, 200); 
});

這裏是演示 - http://jsbin.com/esiLULEb/1/

來源

2013-11-14 12:25:55 Armand

您不必使用jQuery或JavaScript，請情況下，就可以實現與純CSS。

不要在您的動畫div上使用位置屬性。這會導致你動畫效果不佳。相反，使用轉換的高性能動畫。

<div class="circle__wrapper"> 
    <a class="circle" href="#"></a> 
</div> 

/* circle__wrapper will help you to position the div in the center of the page */ 
.circle__wrapper { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

.circle__wrapper a.circle { 
    display:block; 
    height: 168px; 
    width: 168px; 
    background-color: #fea733; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    -webkit-animation: growUp 2s 1.5s; /* You can remove 1.5s if you don't want delay */ 
    -moz-animation: growUp 2s 1.5s; 
    -ms-animation: growUp 2s 1.5s; 
    -o-animation: growUp 2s 1.5s; 
    animation: growUp 2s 1.5s; 
} 


@-webkit-keyframes growUp { 
    0% { -webkit-transform: scale(0); } 
    100% { -webkit-transform: scale(1); } 
} 

@-moz-keyframes growUp { 
    0% { -moz-transform: scale(0); } 
    100% { -moz-transform: scale(1); } 
} 

@-o-keyframes growUp { 
    0% { -o-transform: scale(0); } 
    100% { -o-transform: scale(1); } 
} 

@-ms-keyframes growUp { 
    0% { -ms-transform: scale(0); } 
    100% { -ms-transform: scale(1); } 
} 

@keyframes growUp { 
    0% { transform: scale(0); } 
    100% { transform: scale(1); } 
}

希望這會有所幫助。

來源

2014-11-18 10:26:50

與CSS3動畫擴界

回答

相關問題