css3 动画不断改变字体大小-详细内容

文章内容

2017/8/15 16:14:34,作者: 黄兵

css3 动画不断改变字体大小

最近要做一个css3的动画，实现效果如下：

不断的改变字体的大小，本来要用javascript实现的，但是由于项目的原因，只能用css3 animation实现，代码如下：

.flex_nav_change_size{
    animation: changeSize 2s ease 0.5s forwards;
}
@-webkit-keyframes changeColor {
    0%{color:white;}
    100%{color: #fc5f16;  }
}
@-webkit-keyframes changeSize {
    0%{
        font-size: 2.0rem;
    }
    50%{
        font-size: 2.5rem;
    }
    100%{
        font-size: 1.5rem;
    }
}
@-ms-keyframes changeSize {
    0%{
        font-size: 2.0rem;
    }
    50%{
        font-size: 2.5rem;
    }
    100%{
        font-size: 1.5rem;
    }
}
@-o-keyframes changeSize {
    0%{
        font-size: 2.0rem;
    }
    50%{
        font-size: 2.5rem;
    }
    100%{
        font-size: 1.5rem;
    }
}
@-moz-keyframes changeSize {
    0%{
        font-size: 2.0rem;
    }
    50%{
        font-size: 2.5rem;
    }
    100%{
        font-size: 1.5rem;
    }
}