CSS3动画功能

1.transition功能

transition属性的使用方法:transition:property duration timing-function;

其中property表示对哪个属性进行平滑过渡,duration表示多长时间完成属性值的平滑过渡,timing-function表示通过什么方法来进行平滑过渡。

多平滑过渡示例:

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta http-equiv="content-type" content="text/html; charset=utf-8">
 5     <meta http-equiv="x-ua-compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 7     <title>测试</title>
 8 </head>
 9 <body>
10 <div id="test"></div>
11 <style>
12     #test{
13         width: 500px;
14         height: 500px;
15         background-color: yellow;
16         /*css动画*/
17         transform: rotate(0);
18         -webkit-transition: transform 0.5s linear, width 0.5s linear;
19         -moz-transition: transform 0.5s linear, width 0.5s linear;
20         -ms-transition: transform 0.5s linear, width 0.5s linear;
21         -o-transition: transform 0.5s linear, width 0.5s linear;
22         transition: transform 0.5s linear, width 0.5s linear;
23     }
24     #test:hover{
25         width: 200px;
26         transform: rotate(180deg);
27     }
28 </style>
29 </body>
30 </html>

2.animation功能

使用示例:

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta http-equiv="content-type" content="text/html; charset=utf-8">
 5     <meta http-equiv="x-ua-compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 7     <title>测试</title>
 8 </head>
 9 <body>
10 <div id="test"></div>
11 <style>
12 /*animation动画*/
13     @-webkit-keyframes colorChange {
14         0%{
15             background-color: deepskyblue;
16         }
17         50%{
18             background-color: red;
19         }
20         100%{
21             background-color: deepskyblue;
22         }
23     }
24     #test{
25         width:500px;
26         height: 500px;
27         background-color: deepskyblue;
28     }
29     #test:hover{
30         animation-name: colorChange;
31         animation-duration: 1s;
32         animation-timing-function: linear;
33     }
34 </style>
35 </body>
36 </html>

实现动画的方法:

方法

属性值的变化速度

linear

在动画开始时与结束时以同样的速度进行变化

ease-in

动画开始时速度很慢,然后速度沿曲线值进行加快

ease-out

动画开始时速度很快,然后速度沿曲线值进行放慢

ease

动画开始时速度很慢,然后速度沿曲线值进行加快,然后再沿曲线值进行放慢

ease-in-out

动画开始时速度很慢,然后速度沿曲线值进行加快,然后再沿曲线值进行放慢

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

浅谈 Web 图像优化

前端优化有很多,图像优化也是其中的一部分。无论是渐进增强还是优雅降级,图像优化成为了开发上不可忽视的一部分。 知其然,须知其所以然 图像优化的前提是需要了解图像...

2049
来自专栏AI派

Numpy 修炼之道 (13)—— 将python函数向量化

想要实现将python函数向量化,Numpy中的vectorize 和frompyfunc函数都可以满足要求。

3477
来自专栏大数据风控

Python中的分布分析cut+groupby

分布分析(cut+groupby) 根据分析目的,将数据(定量数据)进行等距或者不等距的分组, 进行研究各组分布规律的一种分析方法。 import numpy ...

2145
来自专栏深度学习自然语言处理

matplotlib--python的数据可视化入门

在平时做实验的时候,往往为了让数据更直接的表达一个趋势或为了描绘一种关系,经常会用到画图,再加上我们经常用的语言是pyhon居多,所以,作为python中的画图...

26810
来自专栏大数据文摘

正则表达式太慢?这里有一个提速100倍的方案(附代码)

1504
来自专栏数说工作室

统计师的Python日记【第七天:数据清洗(1)】

本文是【统计师的Python日记】第7天的日记 回顾一下: 第1天学习了Python的基本页面、操作,以及几种主要的容器类型。 第2天学习了python的函数、...

44110
来自专栏前端知识分享

第85天:HTML5语义化标签

语义标签对于我们并不陌生,如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等,在此基础上HTML5增加了大量更有意义的语义标签...

452
来自专栏coder修行路

用python实现计算1-2*((60-30+(-40/5)*(9-2*5/3+7/3*99/4*2998+10*568/14))-(-4*3)/(16-3*2))类似的公式计算

作业需求: 开发一个简单的python计算器 1、实现加减乘除及拓号优先级解析 2、用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*...

3599
来自专栏xingoo, 一个梦想做发明家的程序员

Elasticsearch——multi termvectors的用法

前一篇已经翻译过termvectors的使用方法了,这对于学习如何使用tf-idf来说是很有帮助的了。 更多内容参考我整理的ELK教程 什么是TF-ID...

19310
来自专栏Python小屋

Python求解一元二次方程根

本文使用Python实现一元二次方程求根公式,主要演示运算符和几个内置函数的用法,封面图片与本文内容无关。 def root(a, b, c, highmidd...

2734

扫码关注云+社区