模板:Dynamic/style.css

/* 基础动画样式 */
.dynamic-container {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
}

.dynamic-placeholder {
    visibility: hidden;
}

.dynamic-item {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    opacity: 0;
    animation-iteration-count: infinite;
}

/* 默认时序函数：瞬间切换 */
.dynamic-instant {
    animation-timing-function: step-end;
}

/* 过渡时序函数：平滑淡入淡出 */
.dynamic-smooth {
    animation-timing-function: linear;
}

/* 瞬间切换关键帧 */
@keyframes fade2 {
    0%   { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fade3 {
    0%   { opacity: 1; }
    33%  { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fade4 {
    0%   { opacity: 1; }
    25%  { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fade5 {
    0%   { opacity: 1; }
    20%  { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fade6 {
    0%   { opacity: 1; }
    16.6% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fade7 {
    0%   { opacity: 1; }
    14.2% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fade8 {
    0%   { opacity: 1; }
    12.5% { opacity: 0; }
    100% { opacity: 0; }
}

/* 平滑淡入淡出关键帧 */
@keyframes smooth-fade2 {
    0%    { opacity: 0; }
    10%   { opacity: 1; }
    40%   { opacity: 1; }
    50%   { opacity: 0; }
    100%  { opacity: 0; }
}

@keyframes smooth-fade3 {
    0%    { opacity: 0; }
    10%   { opacity: 1; }
    28%   { opacity: 1; }
    33%   { opacity: 0; }
    100%  { opacity: 0; }
}

@keyframes smooth-fade4 {
    0%    { opacity: 0; }
    10%   { opacity: 1; }
    20%   { opacity: 1; }
    25%   { opacity: 0; }
    100%  { opacity: 0; }
}

@keyframes smooth-fade5 {
    0%    { opacity: 0; }
    10%   { opacity: 1; }
    15%   { opacity: 1; }
    20%   { opacity: 0; }
    100%  { opacity: 0; }
}

@keyframes smooth-fade6 {
    0%    { opacity: 0; }
    8%    { opacity: 1; }
    12%   { opacity: 1; }
    16.6% { opacity: 0; }
    100%  { opacity: 0; }
}

@keyframes smooth-fade7 {
    0%    { opacity: 0; }
    7%    { opacity: 1; }
    10%   { opacity: 1; }
    14.2% { opacity: 0; }
    100%  { opacity: 0; }
}

@keyframes smooth-fade8 {
    0%    { opacity: 0; }
    6%    { opacity: 1; }
    9%    { opacity: 1; }
    12.5% { opacity: 0; }
    100%  { opacity: 0; }
}