[分享]css3怎样设置自定义动画

CSS3提供了丰富的动画效果，同时也支持自定义动画。下面介绍如何使用CSS3自定义动画。

/* 定义关键帧 */
@keyframes myAnimation{
    0%{transform: translateX(0);}
    50%{transform: translateX(200px);}
    100%{transform: translateX(0);}
}

/* 应用自定义动画 */
.myElement{
    animation-name: myAnimation;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
} 

以上代码中，@keyframes定义了一个名为myAnimation的关键帧，该关键帧定义了元素从0%到50%沿X轴移动200px，再从50%到100%回到原来位置的动画效果。

接着，使用.myElement选择器应用了myAnimation动画，并设置了动画的一些属性，其中包含：

• animation-duration：动画持续时间为2秒
• animation-timing-function：缓动函数采用ease-in-out
• animation-delay：动画延迟时间为0秒
• animation-iteration-count：动画循环次数为无限
• animation-direction：动画方向为反向交替

以上是自定义动画的简单示例，你可以按照自己的需求定义更加复杂的动画效果。