CSS затухание при загрузке страницы, выпадение при зависании

Question

Кто-нибудь знает, как сделать миниатюру затухающей на странице загрузкой и постепенно исчезать до полупрозрачности при наведении?

Я новичок в переходах и анимации CSS. Большое спасибо за вашу помощь!

Вот мой CSS для замирания-ин миниатюр:

/* make keyframes that tell the start state and the end state of our object */ 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 

.fade-in { 
    opacity:0; /* make things invisible upon start */ 
    -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ 
    -moz-animation:fadeIn ease-in 1; 
    animation:fadeIn ease-in 1; 

    -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ 
    -moz-animation-fill-mode:forwards; 
    animation-fill-mode:forwards; 

    -webkit-animation-duration:0.5s; 
    -moz-animation-duration:0.5s; 
    animation-duration:0.5s; 
} 
.fade-in.one { 
-webkit-animation-delay: 0.3s; 
-moz-animation-delay: 0.3s; 
animation-delay: 0.3s; 
} 
.fade-in.two { 
-webkit-animation-delay: 0.4s; 
-moz-animation-delay:0.4s; 
animation-delay: 0.4s; 
} 
.fade-in.three { 
-webkit-animation-delay: 0.5s; 
-moz-animation-delay: 0.5s; 
animation-delay: 0.5s; 
} 
.fade-in.four { 
-webkit-animation-delay: 0.6s; 
-moz-animation-delay: 0.6s; 
animation-delay: 0.6s; 
} 
.fade-in.five { 
-webkit-animation-delay: 0.7s; 
-moz-animation-delay: 0.7s; 
animation-delay: 0.7s; 
} 
.fade-in.six { 
-webkit-animation-delay: 0.8s; 
-moz-animation-delay: 0.8s; 
animation-delay: 0.8s; 
} 

Answer 1

Попробуйте этот пример я вместе взятый. Он использует анимацию, чтобы исчезнуть в элементе, а затем использует css-переходы для изменения непрозрачности при наведении.

Это действительно должно быть сделано с помощью javascript, но вот чистое решение css. Если вы хотите добавить несколько элементов, просто продублируйте один из классов «fade_item_ [x]» и измените время.

PURE CSS версия

CSS:

.blocky_text{ 
    background-color:#229922; 
    display:inline-block; 
    /*for hover transition */ 
    -webkit-transition: opacity 0.5s ease-in-out; 
    -moz-transition: opacity 0.5s ease-in-out; 
    -o-transition: opacity 0.5s ease-in-out; 
    transition: opacity 0.5s ease-in-out; 
} 

.blocky_text:hover{ 
    opacity:0.5; 
} 

@keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Firefox */ 
@-moz-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Safari and Chrome */ 
@-webkit-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Internet Explorer */ 
@-ms-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}​ 

/* Opera */ 
@-o-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}​ 

.fade_item_1{ 
    -webkit-animation: fadein 0.5s; /* Safari and Chrome */ 
    -moz-animation: fadein 0.5s; /* Firefox */ 
    -ms-animation: fadein 0.5s; /* Internet Explorer */ 
    -o-animation: fadein 0.5s; /* Opera */ 
    animation: fadein 0.5s; 
} 

.fade_item_2{ 
    -webkit-animation: fadein 0.8s; /* Safari and Chrome */ 
    -moz-animation: fadein 0.8s; /* Firefox */ 
    -ms-animation: fadein 0.8s; /* Internet Explorer */ 
    -o-animation: fadein 0.8s; /* Opera */ 
    animation: fadein 0.8s; 
} 

.fade_item_3{ 
    -webkit-animation: fadein 1.1s; /* Safari and Chrome */ 
    -moz-animation: fadein 1.1s; /* Firefox */ 
    -ms-animation: fadein 1.1s; /* Internet Explorer */ 
    -o-animation: fadein 1.1s; /* Opera */ 
    animation: fadein 1.1s; 
} 

.fade_item_4{ 
    -webkit-animation: fadein 1.4s; /* Safari and Chrome */ 
    -moz-animation: fadein 1.4s; /* Firefox */ 
    -ms-animation: fadein 1.4s; /* Internet Explorer */ 
    -o-animation: fadein 1.4s; /* Opera */ 
    animation: fadein 1.4s; 
} 

HTML:

<p class="fade_item_1 blocky_text"> An example. </p> 
<p class="fade_item_2 blocky_text"> An example. </p> 
<p class="fade_item_3 blocky_text"> An example. </p> 
<p class="fade_item_4 blocky_text"> An example. </p> 

А вот JSFiddle его работает: http://jsfiddle.net/DFcb9/1/

Jquery версия

CSS:

.blocky_text{ 
    background-color:#229922; 
    display:inline-block; 
    opacity:0;  
} 

.hoverable{ 
    -webkit-transition: opacity 0.5s ease-in-out; 
    -moz-transition: opacity 0.5s ease-in-out; 
    -o-transition: opacity 0.5s ease-in-out; 
    transition: opacity 0.5s ease-in-out; 
} 

.hoverable:hover{ 
    opacity:0.5 !important; 
} 

Jquery:

$(document).ready(function(){ 
    fadeInGroup('.blocky_text'); 
}); 

function fadeInGroup(group){ 
$(this).css("opacity","0"); 
$(group).each(function(index, element) {  
    var d = (130 * (index)).toString() 
    $(this).delay(d).fadeTo(1200,1,function(){ 
     $(this).addClass("hoverable"); 
    }); 
}); 

}

HTML:

<p class="blocky_text"> An example. </p> 
<p class="blocky_text"> An example. </p> 
<p class="blocky_text"> An example. </p> 
<p class="blocky_text"> An example. </p> 
<p class="blocky_text"> An example. </p> 
<p class="blocky_text"> An example. </p> 

С этой версии, вы можете продолжайте добавлять столько текстов, сколько хотите, и они будут постепенно исчезать. Jquery перемещает элементы с классом «blocky_text» и добавляет другую задержку запуска для каждого из них.

Затем вы можете добавить совершенно новую группу элементов данного класса и ввести их только путем дублирования добавляемого непрозрачности: 0 в css и fadeInGroup ('. Classname'); к загрузке документа jquery.

Вот jsfiddle этой работы: http://jsfiddle.net/utKa5/1/

Answer 2

Я думаю, что вы хотите использовать -webkit-переходное-свойство (и его эквиваленты) вместо ключевых кадров.

Смотрите этот учебник вместе с большим количеством примеров:

http://ianlunn.co.uk/articles/hover-css-tutorial-introduction/

Вот простой пример (обратите внимание, что мне нужно гнездовые дивы, поскольку ключевые кадры переопределить переход) - может быть более изящным способ сделать это, но я не потратил времени на его поиск:

<style> 
    @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
    @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
    @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 

    @-webkit-keyframes enter { from { opacity:1; } to { opacity: 0.5; } } 
    @-webkit-keyframes leave { from { opacity:0.5; } to { opacity: 1; } } 

    .fade-in { 
     opacity:0; /* make things invisible upon start */ 
     -webkit-animation:fadeIn ease-in 1; 
     -webkit-animation-fill-mode:forwards; 
     -webkit-animation-duration:1s; 

    } 

    .ghost { 
     -webkit-transition-duration: 0.25s; 
     -webkit-transition-property: opacity; 
    } 

    .ghost:hover { 
     opacity: 0.5; 
    } 
</style> 
<div class="fade-in"> 
    <div class="ghost"> 
     Mouse Over Me! 
    </div> 
</div>