css动画

千次阅读 2017-09-12 18:31:29

CSS 动画定义和用法一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。浏览器支持表格中的...

CSS 动画

定义和用法

一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。

动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀。


4.0 -webkit-	10.0	16.0 5.0 -moz-	4.0 -webkit-	15.0 -webkit- 12.1 12.0 -o-

实例

背景颜色逐渐地从红色变化到蓝色：

@keyframes mymove

{

from {background-color:red;}

to {left:blue;}

}

/*Safari 和 Chrome:*/

@-webkit-keyframes mymove

{

from {background-color:red;}

to {background-color:blue;}

}

尝试一下 »

动画属性

CSS 中的动画属性：

属性	实例
background	尝试一下》
background-color	尝试一下》
background-position	尝试一下》
background-size	尝试一下》
border	尝试一下》
border-bottom	尝试一下》
border-bottom-color	尝试一下》
border-bottom-left-radius	尝试一下》
border-bottom-right-radius	尝试一下》
border-bottom-width	尝试一下》
border-color	尝试一下》
border-left	尝试一下》
border-left-color	尝试一下》
border-left-width	尝试一下》
border-right	尝试一下》
border-right-color	尝试一下》
border-right-width	尝试一下》
border-spacing	尝试一下》
border-top	尝试一下》
border-top-color	尝试一下》
border-top-left-radius	尝试一下》
border-top-right-radius	尝试一下》
border-top-width	尝试一下》
bottom	尝试一下》
box-shadow	尝试一下》
clip	尝试一下》
color	尝试一下》
column-count	尝试一下》
column-gap	尝试一下》
column-rule	尝试一下》
column-rule-color	尝试一下》
column-rule-width	尝试一下》
column-width	尝试一下》
columns	尝试一下》
filter	尝试一下》
flex
flex-basis	尝试一下》
flex-grow	尝试一下》
flex-shrink	尝试一下》
font	尝试一下》
font-size	尝试一下》
font-size-adjust
font-stretch
font-weight	尝试一下》
height	尝试一下》
left	尝试一下》
letter-spacing	尝试一下》
line-height	尝试一下》
margin	尝试一下》
margin-bottom	尝试一下》
margin-left	尝试一下》
margin-right	尝试一下》
margin-top	尝试一下》
max-height	尝试一下》
max-width	尝试一下》
min-height	尝试一下》
min-width	尝试一下》
opacity	尝试一下》
order	尝试一下》
outline	尝试一下》
outline-color	尝试一下》
outline-offset	尝试一下》
outline-width	尝试一下》
padding	尝试一下》
padding-bottom	尝试一下》
padding-left	尝试一下》
padding-right	尝试一下》
padding-top	尝试一下》
perspective	尝试一下》
perspective-origin	尝试一下》
right	尝试一下》
text-decoration-color	尝试一下》
text-indent	尝试一下》
text-shadow	尝试一下》
top	尝试一下》
transform	尝试一下》
transform-origin	尝试一下》
vertical-align	尝试一下》
visibility
width	尝试一下》
word-spacing	尝试一下》
z-index	尝试一下》

收起

展开全文

CSS 动画分类

2019-07-16 10:19:53

CSS 动画主要分为CSS 动画分类和CSS 常用动画库简介与JS 动画；然后CSS 动画分类又分为过渡动画transition和关键帧动画keyframes，keyframes主要是从keyframes规则和keyframes...首先，CSS动画分类的基本概念： 1...

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是否运行。

更多学习参考：https://www.9xkd.com/course/4132287707.html

收起

展开全文

animate

css 动画使用_使用Animista轻松构建酷CSS动画

2020-06-14 12:48:35

在线有大量CSS动画网络应用程序。但是，与Animista所提供的详细程度和易用性相比，几乎没有。这个免费的Web应用程序使您只需单击一个按钮即可生成自定义CSS动画 。您可以在预先设计的动作之间进行选择，例如...


 在线有大量CSS动画网络应用程序 。 但是，与Animista获得的细节水平和易用性相比， 几乎没有 。 
 这个免费的Web应用程序使您只需单击一个按钮即可生成自定义CSS动画 。 您可以在预先设计的动作之间进行选择，例如幻灯片，变换，摆动，甚至是阴影动画。 
 创建动画后，就可以像使用其他CSS生成器一样导出代码 。 除此之外，此代码更易于使用，甚至带有内置的minifier工具 。 

 界面一开始会让人感到困惑，但这仅仅是因为您有多少选择！ 
 您可以按照以下三个主要步骤来构建自定义动画，并使用从上到下的界面： 

 从顶部的圆圈中选择一种运动样式 （摆动，滑动，翻转缩放） 
 在下方使用不同的运动类型自定义 
 在浮动的左侧选项栏中编辑动画选项 

 通过此过程，您可以更改动画的总持续时间，缓动样式，延迟等几乎所有方面。 所有这些都通过纯CSS3进行 ，这使它更加令人印象深刻。 
 还要注意，在最顶部的导航栏上，您甚至可以在不同类型的动画目标样式之间进行选择。 
 默认值为“基本” ，几乎可以处理任何内容（悬停，单击或立即播放动画）。 其他目标包括页面文本，背景动画，甚至是自定义入口动画，以使隐藏的页面元素可见。 
 我特别喜欢顶部的“注意力”链接，该链接对按钮样式具有很酷的抖动和抖动效果。 这些在CTA按钮上非常有用，可以吸引注意力并鼓励用户互动。 

 完成调整后，只需单击预览窗格右上角的小括号图标 。 
 这将带您完整CSS动画类以及关键帧进入一个新页面。 可选功能使您可以减少代码并包括支持旧版Web浏览器的自动前缀 。 
 我使用了大量的自定义CSS动画工具，毫无疑问，Animista是其中功能最丰富的工具。 它是完全免费的，一开始有点复杂，但是一旦您了解了该接口，它便是迄今为止可以使用的最佳生成器。 
 要尝试一下，只需访问主页并单击“ Try me”。 您还可以与网络应用的创建者@ ana108分享您的想法和赞美。 



翻译自: https://www.hongkiat.com/blog/animista-generate-css-animations/

收起

展开全文

html web

CSS动画的毕业设计
千次阅读 多人点赞 2020-09-02 20:09:25
CSS动画的毕业设计用CSS动画写一个七龙珠，据说善良的程序员可以看到龙神，并许愿成功动画的基本属性和参数老样子，先给源码 <!DOCTYPE html> <html lang="en" > <head> <...
收起
animation
关于css动画的优化
千次阅读 2017-05-04 02:10:04
css 动画
收起
uni-app扫雷先锋 nvue css过渡动画 nvue css动画
2021-03-02 11:41:20
uni-app扫雷先锋 nvue css过渡动画 nvue css动画需求分析需求nvue使用css过渡动画的注意事项需求分析 uniapp写项目如果只要app端，为了提升整体的性能和体验，可能会考虑整体使用nvue。在多端兼容的情况下也有可能...
收起
vue uni-app
CSS动画效果
万次阅读 多人点赞 2019-05-28 20:21:11
07三列等宽布局 1 2 3 07、css3伸缩布局 css3伸缩布局 1 2 3 08、css3伸缩布局固定 css3伸缩布局固定宽度 1 2 3 09、css3伸缩布局垂直分布 ...
收起
css动画和js动画的差异性
2020-06-12 09:54:04
渲染线程分为main thread和compositor thread，如果css动画只改变transform和opacity，这时整个CSS动画得以在compositor trhead完成（而js动画则会在main thread执行，然后出发compositor thread进行下一步操作...
收起
css动画及js动画的区别
千次阅读 2018-06-12 13:42:09
css动画 相对来说代码少代码简单 js 动画需要引入各种库之类的对于多种类似的动画过程css动画需要些好多不支持复用 js动画可以实现一个函数重复调用函数切换不同的参数就可以css动画 对于细节的帧数把控不是...
收起
常见 CSS 动画库
千次阅读 2018-08-15 16:14:04
自从 CSS3 有了动画功能，从此 Web 页面就迈进“忽如一夜春风来，千页万页动画开”的盛况。所以 CSS 动画除了是炫技之选更是一项基本技能，当然也...Animate.css 是最早的也是目前最流行和最易于使用的CSS动画库之...
收起
css动画与js动画的区别
千次阅读 2018-09-21 10:42:55
使用动画（js实现动画，css3实现动画） + 一个是帧动画一个是补间动画 + 什么是帧动画：使用定时器每隔一段时间更改当前元素的状态 ...CSS动画优点： 1、浏览器可以对动画进行优化。（1）浏览器使用与 req...
收起
css js
CSS动画，风车案例
style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; } #wrap{ width: 300px; height: 300px; position: absolute...
收起
html
HTML5+CSS动画最佳实战
2016-02-22 15:27:31
HTML5+CSS动画最佳实战，研究一下css3动画的魅力，提高篇...网络下载收集的
收起
简单的CSS动画
2019-01-18 11:17:07
简单的CSS动画 （作者：郭海明，撰写时间：2019年1月17日）如果我们想让一个长方块沿水平方向移动，并且方块是翻滚状态下移动，这个时候我们就可以通过一个简单的CSS3方法来实现这个动作，先在HTML里面设置一个...
收起
9种常用CSS动画
千次阅读 2020-10-28 19:21:13
复制可用 <!... <... <...9种css动画</title> <link rel="stylesheet" type="text/css" href="css/demo2.css"/> <link rel="icon" sizes="any" mask="" href="./img/baidu.svg
收起
html animation
Animation.css动画效果属性
千次阅读 2020-01-06 17:17:24
Animation.css动画效果属性安装使用写法规则animation.css支持的动画种类支持延时效果（delay效果延时执行）和加速（speed效果执行所花费的时间）使用示例安装 npm install animate.css --save 或者 yarn add ...
收起

css 动画

@keyframes

举个栗子

分开定义

animation

animation-name

animation-duration

举一个栗子

animation-timing-function

DevTools

animation-delay

animation-iteration-count

举栗子

animation-direction

normal

reverse

alternate

alternate-reverse

animation-fill-mode

forwards

backwards

both

正序

倒序

总写

css动画

CSS 动画

定义和用法

浏览器支持

实例

动画属性

CSS 动画分类

首先，CSS动画分类的基本概念：

1 过渡动画（transition）

2 关键帧动画（Animation）

其次 浏览器支持

基本语法

1 animationname - 关键帧名称

2 duration - 动画持续时间（单位：s/ms）

3 timing-function - 时间函数曲线

4 delay - 动画开始延迟时间（单位：s/ms）

5 iteration-count - 动画播放次数

6 direction - 动画播放方向

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

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

css 动画使用_使用Animista轻松构建酷CSS动画

CSS动画的毕业设计

关于css动画的优化

uni-app扫雷先锋 nvue css过渡动画 nvue css动画

CSS动画效果

css动画和js动画的差异性

css动画及js动画的区别

常见 CSS 动画库

css动画与js动画的区别

CSS动画，风车案例

HTML5+CSS动画最佳实战

简单的CSS动画

9种常用CSS动画

Animation.css动画效果属性

css动画

其次浏览器支持