css3动画添加间隔

因项目需要，需要在元素上实现动画效果，并且需要有动画间隔。坑爹的是animation-delay只有在第一次动画开始的时候才起效。

在网上找了很多方法，最终的方法基本都是改动画规则，比如

@keyframes move{/*  此处从75%开始 */75%{ transform: translateX(0px);}100%{ transform: translateX(100px);}
}

但是项目的特殊性在于元素都是组件类型的，意思就是给每个元素写单个的动画效果是不现实的。因为动画效果是通用的，不能因为某个元素就更改。

css的方法走不通，就只有走js了，我就想到了用定时器，核心思想就是根据动画时间和间隔时间对组件的style.animation属性进行更改

代码如下

function  getStyle (item) {// item解释：这是个包含组件的style信息的对象，属性就是style的各个属性，里面还有一个id，id就是我要设置的组件idlet nowStyle = item.style;let nowId = item.id;let nowStyleObj = {}let nowAnimationStr = ‘‘nowAnimationStr = nowStyle.code + ‘ ‘ + nowStyle.duration + ‘s ‘ + nowStyle.timingFunction + ‘ ‘ + nowStyle.iterationCount + ‘ ‘ + nowStyle.direction;// 拼出animation属性字符串nowStyleObj = {animation: nowAnimationStr}if (nowStyle.interval) {//先判断是否需要间隔setTimeout(function () {document.getElementById(nowId).parentElement.style.animation = ‘‘setTimeout(function () {document.getElementById(nowId).parentElement.style.animation = nowAnimationStr}, nowStyle.interval * 1000)}, nowStyle.duration * 1000)setTimeout(function () {setInterval(function () {document.getElementById(nowId).parentElement.style.animation = ‘‘setTimeout(function () {document.getElementById(nowId).parentElement.style.animation = nowAnimationStr}, nowStyle.interval * 1000)}, (nowStyle.duration + nowStyle.interval) * 1000)}, nowStyle.duration * 1000)}return nowStyleObj}

代码如上，至于为什么定时器嵌套这么多，主要是为了第一次加载的时候展示正确的动画效果，如果对初次加载不在意的，可以直接使用setInterval那段代码就行。

css3动画添加间隔相关推荐

css3 特效加1加2,Bootstrap轮播加上css3动画，炫酷到底！
很多时候,如果你的项目需要的是一个轻量级的轮播,不需要很多的功能.同时你的项目是采用Bootstrap,(一个最流行的开源前端框架)的话.你可以参考一下bootstrap官方组件. 介绍Animate ...
一起领略css3动画的强大
CSS3的确出了不少高大上的功能,3D效果/动画/多列等等;今天写篇文章记录怎么一下怎么用CSS3写一个动画;不过还是要提醒大家:IE9及以下版本不支持CSS3动画(需要可以考虑用js,不过估计效果不 ...
css3 动画的实现
目录前言一.@keyframes + animation 1.@keyframes--创建动画 (1).在 @keyframes 中用 from 和 to 创建动画 (2).在 @keyframe ...
css3 动画+奔跑的熊案例
动画的使用 1.先定义动画 2.调用动画用keyframes定义动画 @keyframes 动画名称{ /* 开始状态 / 0%{ } / 结束状态 / 100%{ } } 调用动画 animati ...
css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
CSS3动画(典型模板)
CSS3动画原理: 就是通过鼠标的单击.获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值. 步骤: 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 第一,在默认样式 ...
svg配合css3动画_带有Adobe Illustrator，HTML和CSS的任何网站的SVG动画
svg配合css3动画 A top trend in web design for 2020 is the increased use of SVG animations on web pages a ...
8个超震撼的HTML5和纯CSS3动画源码
HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...
css3案例分析,CSS3动画/动画库以及案例分析（上）
在这html5遍天下的年代,越来越多的网页也用到了css3的动画效果,这让原本我们静态的页面有了更多的活力.最近也一直在做这方面的页面,有些小小的心得,和诸位分享下. CSS3的动画绝对是很赞的,不仅 ...

css3动画添加间隔

css3动画添加间隔相关推荐

最新文章

热门文章