私はリンクされたウェブサイト、css3またはjqueryでアニメーションがどのように行われたかを理解しようとしていますか？

Question

http://alpha.patterntap.com/

あなたは、画像の上にマウスを置く場合には、内側にアニメーション化すてきな境界線を気づくには、CSS3の挿入図の影で行われていることでしょうか？それともjqueryなの？

Answer 1

それは具体的には、あなたがここでそれを見ることができる仕事、-webkit-transitionでCSS3です：

.list .item .shad { 
    position:relative; 
    top:-1px; 
    margin:1px 0 -1px; 
    border:1px solid #000; 
    opacity:0.25; 
    -moz-opacity:0.25; 
    filter:alpha(opacity=25); 
    -webkit-transition:all 0.1s linear; /* here! */ 
} 

それは、これらのプロパティ値をアニメーションです：

.list .item:hover .shad{ 
    top:-10px; 
    margin:10px 0 -10px; 
    background:rgba(0,0,0,0.5); 
    border:11px solid #050505; 
    opacity:0.85; 
    -moz-opacity:0.85; 
    filter:alpha(opacity=85); 
} 

を

Answer 2

JSのようです。 CSSのトランジションやアニメーションなどを見つけることができませんでした。また、この効果にかなり似ています：

http://css-tricks.com/inset-border-effect/