关闭

CSS 动画分类

时间: 2019-06-02阅读: 1551标签: 动画

css 动画主要分为css 动画分类和CSS 常用动画库简介与js 动画;然后CSS 动画分类又分为过渡动画transition和关键帧动画keyframes,keyframes主要是从keyframes规则和keyframes属性来介绍。CSS 常用动画简介库简介与js 动画主要是Animate.css 的引入、Animate.css 使用举例和JS 动画。


首先,CSS动画分类的基本概念:

1 过渡动画(transition)

从初始状态过渡到结束状态所产生的动画,它只能定义初始和借宿两个状态,不能定义中间状态,它是一种很简单的最基础的css动画,这个过渡动画只能被动触发,不能主动触发,而且也不能重复发生。被动触发一次,它发生一次,不能重复。


2 关键帧动画(Animation)

使用关键帧@keyframes,在关键帧里面的写法如下:

在每一个阶段我们可以定义不同的元素状态,也就是css,这样就大大增强了css的动画能力。

总结起来就是:可以定义多个状态,可以实现更复杂的效果,相对于transition它可以主动的触发,也可以重复发生。

@keyframes 动画名称 {
    时间点 {
		元素状态
	}
    时间点 {
		元素状态
	}
    时间点 {
		元素状态
	}
    时间点 {
		元素状态
	}
    …
}


其次 浏览器支持

完全支持该属性的第一个浏览器版本



基本语法

.main {
   animation: animationname(动画名字) duration(持续时间) timing-function(时间运动曲线) delay(延迟) iteration-count(总共重复的次数) direction(方向,正向播放还是反向播放) fill-mode(定义开始和结束的状态) play-state(是否停止或运行这个动画);
}
    
 //animationname是和keyframes绑定的,在animationname下面定义动画的状态,一种是from...to从开始到结束,这个是和transition一样的,一种是百分比,从0%到100%,可以定义任意的中间状态。
@keyframes animationname {
    from { css-code }
    to { css-code }
    
    0% - 100% { css-code }
}


1 animationname - 关键帧名称

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
    }
    
    @keyframes round {
        from { css-code }
        to { css-code }
    
        0% - 100% { css-code }
    }


2 duration - 动画持续时间(单位:s/ms)

    .main {
         width: 100px;
         height: 100px;
         background: red;
         position: relative;
         animation-name: round;
         animation-duration: 500ms;
         animation-iteration-count: infinite;
     }
     @keyframes round {
         0%  {
               top: 0%;
               left: 0%;
               background: red;
         }
         25% {
               top: 0%;
               left: calc(100% - 100px);
               background: blue;
         }
         50% {
               top: calc(100% - 100px);
               left: calc(100% - 100px);
               background: yellow;
         }
         75% {
               top: calc(100% - 100px);
               left: 0%;
               background: green;
         }
         100% {
               top: 0%;
               left: 0%;
               background: red;
         }
     }


3 timing-function - 时间函数曲线

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);   //贝塞尔曲线
    }

timing-function 在animation里面的时间区间是两套css样式之间 ** **4 delay - 动画开始延迟时间(单位:s/ms)

仅定义第一次开始延迟时间

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    	animation-delay: 3s;
    }


5 iteration-count - 动画播放次数

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-delay: 3s;
    }

在transition里面是不能定义播放次数的,但是animation可以,它可以定义两种:一种是具体的播放次数(n),一种是无限循环(infinite)。


6 direction - 动画播放方向

动画实际上是相对于时间来讲的,它的播放方向就是正向还是反向播放。它有四个值,分别是:

normal(正常播放)、reverse(反向播放)、alternate(奇数次正向,偶数次反向)、alternate-reverse(偶数次正向,奇数次反向)。

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-delay: 3s;
        animation-direction: alternate;
    }


7 fill-mode - 动画不播放时应用到元素的样式

分为两个状态,一个是还没有开始放,另一个是放完了,也就是说它的循环次数不是无限次的,那么对应的有两个值比较关键:forwards 动画结束后动画将应用该属性值,也就是说动画播放完了,我们继续保留这个属性;backwards 动画开始前应用第一帧的样式,比如说本来有一个样式,然后有一个动画,动画没开始,这时我们就需要把动画的第一帧应用到当前的这个元素上。除此之外呢,还有一个none 两个都不用也就是动画结束后恢复原有样式以及both 两个都用。

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-delay: 3s;
        animation-direction: alternate;
        animation-fill-mode: forwards;
    }


8 play-state - 控制动画运行或暂停

有两个值:paused 暂停和 running 运行。play-state一般应用于JS,应用js来控制css是否运行。

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/3987

css3动画添加间隔

因项目需要,需要在元素上实现动画效果,并且需要有动画间隔。坑爹的是animation-delay只有在第一次动画开始的时候才起效。在网上找了很多方法,最终的方法基本都是改动画规则

css3元素动画实例

css3中实现动画一般有两种方式,一个是transition过渡,一个是animation动画。最主要区别就是transition需要条件触发,通常会用hover来触发,而animation则更灵活,可以自动播放,也可以通过条件触发。

css3动画 Transition

CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的

css3动画怎么停止?

动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间,或用关键词 \\\"from\\\" 和 \\\"to\\\",等同于 0% 和 100%。

Js封装一个简单的动画函数

动画函数多个目标值之间移动,1、如果是正值,则向大取整 2、如果是负值,则向小取整。清除定时器,是指清除谁的定时器,这里是轮播图,所以清除元素的定时器;创建定时器,清除定时器,页面中就没有定时器

hooks 与 animejs

animejs 是现如今非常不错的一个 js 动画库。我们将其与 React Hooks 融合,使它更方便的在 React 中使用。

CSS动画的属性Transition与Animation

本文总结CSS3中两个用来做动画的属性,一个是transition,另一个是animation。transition在给定的持续时间内平滑地更改属性值(从一个值到另一个值),也就是只需要指定开始与结束的参数,参数改变时就触发动画。

为何 Canvas 内元素动画总是在颤抖?

在项目中我们可能对动画进行锁帧,帧率可能是 60 或者 30,如果我们想保证渲染不抖动,在匀速直线运动中,我们尽量保证我们设置的速度要是帧率的倍数,或者保证平均每帧移动的像素点是一样的

JS动画和CSS动画

CSS实现动画:animation transition transform;JS实现动画:setInterval setTimeout requestAnimationFrame。CSS动画:优点(浏览器可以对动画进行优化)

彻底掌握css动画【transition】

说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!