css3有哪些2d过渡动画特性

CSS3是一个允许前端设计人员创建更加优秀的web页面的工具。其中包括各种过渡动画特效，这些特效可以帮助设计人员使网站更加生动有趣。下面是CSS3中的一些流行的2D过渡动画特性。

1.平移（Translation）.float{
       animation: move 3s infinite;
}
@keyframes move {
   0% {
     transform:translate(0,0);
 }
   50% {
     transform:translate(500px,0);
 }
   100% {
     transform:translate(0,0);
 }
}
2.旋转（Rotate）.rotate{
       animation: rotate 3s infinite;
}
@keyframes rotate {
    0% {
            transform:rotate(0deg);
    }
    50% {
            transform:rotate(180deg);
    }
    100% {
            transform:rotate(360deg);
    }
}
3.缩放（Scaling）.scale{
       animation: scale 3s infinite;
}
@keyframes scale {
   0% {
     transform:scale(1);
 }
   50% {
     transform:scale(2);
 }
   100% {
     transform:scale(1);
 }
}
4.斜切（Skew）.skew{
       animation: skew 3s infinite;
}
@keyframes skew {
   0% {
     transform:skew(0);
 }
   50% {
     transform:skew(30deg);
 }
   100% {
     transform:skew(0);
 }
}
    

2D过渡动画特性可以使web页面变得更加炫酷，同时也能够吸引用户的眼球。在运用CSS3过渡动画特性的时候，设计师应该根据不同的网站需求判断使用哪种特效。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！