css动画-animations

css animations 使从一个css样式转换为另一个样式。 一般动画都是由@keyframes实现

animation子属性

animation-delay  设置延时

animation-direction 设置动画运行后，反向还是重新运行  alternate 来回动画

animaton-duration 一个周期的时长

animation-iteration-count  设定动画重复次数    infinite重复

animation-name   指定@keyframes 描述关键帧的名称

@keyframes 规则

    @keyframes slidein {from{margin-left: 100%;width: 100%;}to{margin-left: 0;width: 100%;}}

常用类型是：

p{position: relative;width: 100px;border: 1px solid #000;animation: fly 2s ease 1s infinite alternate;}@keyframes fly {0%{width: 100px;left: 100%;}50%{width: 150px;left: 50%;}100%{width: 100px;left: 0;}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！