【实用随记】纯css的焦点图效果

注：#scroll_1 为：<input type="radio" name="radio_set" checked="checked" id="scroll_1">

radio 被checked 执行动画

#scroll_1:checked ~ .botton #atext1 h1,

#scroll_2:checked ~ .botton #atext2 h1,
#scroll_3:checked ~ .botton #atext3 h1{
-webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
animation: moveDown 0.6s ease-in-out 0.2s backwards;
}


@-webkit-keyframes moveDown{
0% { 
-webkit-transform: translateX(-40px); 
opacity: 0;
}
100% { 
-webkit-transform: translateX(0px);  
opacity: 1;
}
}


@-moz-keyframes moveDown{
0% { 
-moz-transform: translateX(-40px); 
opacity: 0;
}
100% { 
-moz-transform: translateX(0px);  
opacity: 1;
}
}


@-o-keyframes moveDown{
0% { 
-o-transform: translateX(-40px); 
opacity: 0;
}
100% { 
-o-transform: translateX(0px);  
opacity: 1;
}
}


@-ms-keyframes moveDown{
0% { 
-ms-transform: translateX(-40px); 
opacity: 0;
}
100% { 
-ms-transform: translateX(0px);  
opacity: 1;
}
}


@keyframes moveDown{
0% { 
transform: translateX(-40px); 
opacity: 0;
}
100% { 
transform: translateX(0px);  
opacity: 1;
}
}




@-webkit-keyframes moveUp{
0% { 
-webkit-transform: translateX(40px); 
opacity: 0;
}
100% { 
-webkit-transform: translateX(0px);  
opacity: 1;
}
}


@-moz-keyframes moveUp{
0% { 
-moz-transform: translateX(40px); 
opacity: 0;
}
100% { 
-moz-transform: translateX(0px);  
opacity: 1;
}
}


@-o-keyframes moveUp{
0% { 
-o-transform: translateX(40px); 
opacity: 0;
}
100% { 
-o-transform: translateX(0px);  
opacity: 1;
}
}


@-ms-keyframes moveUp{
0% { 
-ms-transform: translateX(40px); 
opacity: 0;
}
100% { 
-ms-transform: translateX(0px);  
opacity: 1;
}
}


@keyframes moveUp{
0% { 
transform: translateX(40px); 
opacity: 0;
}
100% { 
transform: translateX(0px);  
opacity: 1;
}
}