[分享]css3手机页面飞出动画效果

随着移动互联网的普及，越来越多的网站倾向于使用响应式布局来适配不同尺寸的屏幕。而在手机页面中加入一些动画效果，可以增加用户的交互体验和页面的美观程度。本篇文章将介绍一种常见的css3手机页面飞出动画效...

随着移动互联网的普及，越来越多的网站倾向于使用响应式布局来适配不同尺寸的屏幕。而在手机页面中加入一些动画效果，可以增加用户的交互体验和页面的美观程度。本篇文章将介绍一种常见的css3手机页面飞出动画效果。

.slideIn{
    -webkit-animation: slideIn .5s ease-in-out both;
    -moz-animation: slideIn .5s ease-in-out both;
    -ms-animation: slideIn .5s ease-in-out both;
    animation: slideIn .5s ease-in-out both;  
}
@keyframes slideIn{
    0%{
        transform: translateY(100%);  /*起始位置在页面底部*/
        opacity: 0;  /*初始时设置为透明*/
    }
    100%{
        transform: translateY(0);  /*结束位置在原位置*/
        opacity: 1;  /*渐变显示元素*/
    }
} 

以上是css3代码示例，其中slideIn为自定义的类名，在需要应用该动画效果的元素上添加即可。在@keyframes 中使用transform属性来实现元素的动画效果，从底部移动到页面上方。同时，通过设置opacity属性，实现了渐变显示元素的效果。

总的来说，通过css3动画效果可以为移动页面增加一些交互体验，使得用户更愿意停留在该页面。而对于开发者来说，要善于运用这些动画效果，从而提高页面的美观度和功能性。