Animation编辑器

预览

可编辑文本

动画属性

animation-name：

animation-duration：

s

animation-timing-function：

animation-delay：

s

animation-iteration-count：

animation-direction：

animation-fill-mode：

动画语法

animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-direction> <animation-fill-mode> <animation-play-state>

动画示例

zoomIn rollIn slideInDown swing flash

0%

100%

keyframe - 0 %

自定义

属性

keyframe - 100 %

生成代码

CSS方式

JavaScript方式

简短拆分

@keyframes aniTest {
    0% {
        opacity: 0;
        transformOrigin: 0 100%;
        transform: scale(0, 0) translate(-700px, 0px);
    }

    100% {
        opacity: 1;
        transformOrigin: 100% 100%;
        transform: scale(1, 1) translate(0px, 0px);
    }
}

animation: aniTest 1s 1;

推广

共 0 条评论