[分享]css3新增了哪些用来实现动画

CSS3为网页动画的设计带来了新的可能性，新增加了一些用来实现动画的属性。下面就来看看CSS3新增加的一些用来实现动画的属性。 .animate { animationname: myanimatio...

CSS3为网页动画的设计带来了新的可能性，新增加了一些用来实现动画的属性。下面就来看看CSS3新增加的一些用来实现动画的属性。

 .animate {
        animation-name: myanimation;
        animation-duration: 2s;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
    }
    @keyfames myanimation {
        0% { transform: translateY(0); }
        50% { transform: translateY(50px); }
        100% { transform: translateY(0); }
    } 

animation-name：用来指定动画的名称。

animation-duration：用来指定动画的持续时间。

animation-delay：用来指定动画的延迟时间。

animation-iteration-count：用来指定动画的执行次数。

animation-direction：用来指定动画的方向（正向或反向）。

animation-timing-function：用来指定动画的时间曲线。

@keyframes：用来定义动画的关键帧。

transform：用来指定元素变形的效果。

除了以上属性，CSS3还新增加了一些过渡（transition）属性，让动画变得更加平滑，例如：

 .transition {
        transition-property: all;
        transition-duration: 2s;
        transition-delay: 1s;
        transition-timing-function: ease-in-out;
    } 

transition-property：用来指定哪些CSS属性会被过渡。

transition-duration：用来指定过渡效果持续的时间。

transition-delay：用来指定过渡效果的延迟时间。

transition-timing-function：用来指定过渡效果的时间曲线。

通过这些新增加的属性，我们可以在CSS中实现更加绚丽多彩的动画效果，让网页变得更加生动有趣。