css3动画2种区分

最新推荐文章于 2022-10-05 15:38:40 发布
最新推荐文章于 2022-10-05 15:38:40 发布
阅读量1.9k 收藏
点赞数 1
分类专栏： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mudeer2012/article/details/46780763
版权
  1. transform:元素转换效果。包含移动、旋转、缩放、变形。一般用于:hover事件。
    这里写图片描述
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
</body>
</html>

效果如下:
这里写图片描述
2. transition:过渡效果。一定程度代替Flash和js，在元素的样式发生变化时生效。定义生效的属性和过渡时间。
这里写图片描述

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}

div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>
</head>
<body>
<div>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</div>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>

效果如下:
这里写图片描述

transition定义于初始元素样式上始终生效，transform(动作)则定义于变化后的样式中。

3.animation动画。使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
自定义动画使用@keyframes myanimation{}
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

@keyframes myanimation
{
from {background: red;}//from等效0%
to {background: yellow;}//to等效100%
}
<!DOCTYPE html>
<html>
<head>
<style> 
div
    {
    width:60px;
    height:40px;
    background:#92B901;
    color:#ffffff;
    position:relative;
    font-weight:bold;
    font:bold 12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
    padding:20px 10px 0px 10px;
    animation:animated_div 5s 1;
    -moz-animation:animated_div 5s 1;
    -webkit-animation:animated_div 5s 1;
    -o-animation:animated_div 5s 1;
    border-radius:5px;
    -webkit-border-radius:5px;
    }

@keyframes animated_div
    {
    0%      {transform: rotate(0deg);left:0px;}
    25%     {transform: rotate(20deg);left:0px;}
    50%     {transform: rotate(0deg);left:500px;}
    55%     {transform: rotate(0deg);left:500px;}
    70%     {transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100%    {transform: rotate(-360deg);left:0px;}
    }

@-webkit-keyframes animated_div
    {
    0%      {-webkit-transform: rotate(0deg);left:0px;}
    25%     {-webkit-transform: rotate(20deg);left:0px;}
    50%     {-webkit-transform: rotate(0deg);left:500px;}
    55%     {-webkit-transform: rotate(0deg);left:500px;}
    70%     {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100%    {-webkit-transform: rotate(-360deg);left:0px;}
    }

@-moz-keyframes animated_div
    {
    0%   {-moz-transform: rotate(0deg);left:0px;}
    25%  {-moz-transform: rotate(20deg);left:0px;}
    50%  {-moz-transform: rotate(0deg);left:500px;}
    55%  {-moz-transform: rotate(0deg);left:500px;}
    70%  {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100% {-moz-transform: rotate(-360deg);left:0px;}
    }

@-o-keyframes animated_div
    {
    0%   {transform: rotate(0deg);left:0px;}
    25%  {transform: rotate(20deg);left:0px;}
    50%  {transform: rotate(0deg);left:500px;}
    55%  {transform: rotate(0deg);left:500px;}
    70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100% {transform: rotate(-360deg);left:0px;}
    }
</style>
</style>
</head>
<body>
<div></div>
<p><b>注释：</b>当动画完成时，会变回初始的样式。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
mudeer2012
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
itRolls:基于css3的3d动画转盘
05-05
一个模拟物理转盘的基于CSS3以及HTML5 Localstorage的随机选择本地小工具。不兼容移动端! 主要由转盘页面及设置页面组成。演示地址： ##使用说明 在没有设置内部数据*（我们称转盘每个面上的文字为内部数据）及转盘...
CSS3的动画类型
weixin_57727027的博客
03-05 235
变形–缩放 scale() scale()缩放：scale()函数让元素根据中心原点对对象进行缩放。 缩放 scale 具有三种情况： 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） 注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。 2、scaleX(x)元素仅水平方向缩放（X轴缩放） 3、scaleY(y)元素仅垂直方向缩放（Y轴缩放） 用法： ①transform:scale(0.8);//缩小到原来的0.8倍 ②transfor
CSS3实现放大缩小动画
仿站、源码搭建/迁移技术博客
05-17 1574
HTML <div> <div style="height: 35px;width:300px;background:orangered;border-radius: 4px;" id="animat"></div> </div> CSS #animat{ position:relative; animation:mymove 5s infinite; -
css过渡(transition)和css(animation)动画的区别？
weixin_43844696的博客
06-03 1171
CSS3中出现很多新的特性，其中比较好玩的3D操作就是：过渡和动画效果。那么css过渡和css动画的区别是什么？下面本篇文章就来给大家介绍一下CSS中过渡和动画的区别，希望对大家有所帮助。 css过渡和动画的区别： animation属性类似于transition，他们都是随着时间改变元素的属性值，那么区别是什么？ 其主要区别在于：transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的
12.CSS3常见动画有哪些？实现方式？
kleinBlue.的博客
11-07 587
一、是什么 CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块 即指元素从一种样式逐渐过渡为另一种样式的过程 常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合 css实现动画的方式，有如下几种： transition 实现渐变动画 transform 转变动画 animation 实现自定义动画 二、实现方式 transition 实现渐变动画 transition的属..
css3d动画：平移、旋转、缩放
YY的博客
10-05 5544
transform：translate3d（）、transform：rotate3d（）、
html5+css3实现响应式旋转太极
01-02
基于html5和css3的动画、阴影和伪类等，实现不断旋转的太极图动画效果，响应式设计区分PC端和移动端的浏览效果，
html+css3+javascript课件
09-09
HTML(Hypertext Markup Language)超文本标记语言是表示网页的一种规范或标准，通过标记符定义描述页面的文本、图片、声音和影视动画 —用于设计静态网页.html文件。 所谓超文本主要是指它对图片、声音和影视的...
微信小程序实现动态列表项的顺序加载动画
12-29
1、最开始用了纯CSS动画animation，发现动画需要重复写，于是换使用transition动画。 2、使用onReady()可以让页面加载好再显示动画以免动画提前结束。 代码 wxml <!-- style中的主要为了区分已加载好的项和新...
JavaScript详解(第2版)
04-25
2.2.1　区分大小写问题　27 2.2.2　自由形式及保留字　27 2.2.3　语句及分号　28 2.2.4　注释　28 ... 2.2.5　〈script〉标签　 　2.3　生成HTML　并输出显示　 　2.3.1　字符串及字符串串联　 　2.3.2　write()及...
Transform总结
zhaoguxiaoshi的博客
10-10 697
Transform总结 原文转自：http://www.jianshu.com/p/05eea9ba5baa CSS3动画的属性主要分为三类：transform、transition以及animation。 Transform:(css3 2D 转换) 注意：这些效果叠加时，中间用空格隔开 作用：能够对元素进行移动、缩放、转动、拉长、拉伸 转换：使元
css3动画animation属性大全
低调哥的博客
02-28 1万+
animation属性语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;例：animation: myanimation 2s linear 1s infinite forwards;animation 属性是一个简写属性，用于设置动画属性：animati...
两种方式实现CSS动画
王龙楷
04-16 7032
实现CSS动画有两种主要的方法：过渡动画(transition)和animation动画。第一种：过渡动画（transition）。&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;CSS动画之transition&lt;/tit
css3中创建动画的三种方式详解
Loliner`s Blog
08-31 4223
1、介绍了css3中三种动画创建的方式； 2、利用JQuery中的Deferred对象编写链式动画。
css3，transition，animation两种动画实现区别
weixin_30537391的博客
08-22 430
我们为页面设置动画时，往往会用到transition还有animation以及transfrom属性或者用到js。 其实通常情况下，对于使用js我们更加倾向于使用css来设置动画。 transfrom就不用说了，它本身就一个css属性。 transition 是可以为一个或者多个用数值表示的CSS属性发生变化时添加动画效果。 .demo{ overflow: hid...
CSS 动画分类
ciguanpeng7618的博客
07-03 256
CSS 动画主要分为CSS 动画分类和CSS 常用动画库简介与JS 动画；然后CSS 动画分类又分为过渡动画transition和关键帧动画keyframes，keyframes主要是从keyframes规则和keyframes属性来介绍。CSS 常用动画简介库简介与JS 动画主要是Anima...
在CSS中如何区分和
人生即选择!
06-02 668
某css文件部分内容：  input{         background-color:#ff0000;  }   这个css控制所有的input背景都是#ff0000，不管是文本框还是按钮都由此来控制。  我现在想让文本框背景颜色为#ffffff,按钮背景颜色为#ccccff，这个css文件怎么写?前提是不要修改其它页面，不可给按钮专门引用class   -------------------
CSS3中的三种动画
北冥有鱼
05-09 400
tranform形变动画: rotate旋转/skew扭曲/scale缩放/translate移动/matrix矩阵变形;transition缓动动画: property 样式、 duration完成过渡所需时间、 timing-function过渡函数、 delay延迟时间;animation逐帧动画: KeyframesName帧名、 property 样式、 duration完成过渡所需时间...
css3两种hover动画
热门推荐
dengjiecsdn的博客
08-09 1万+
1.先定义动画，再调用动画。这类似javascript的函数调用。 1.1/*先命名css动画，此处我随意命名为hover-zoom,*/ @-webkit-keyframes hover-zoom{     50%{         -webkit-transform:scale(0.8);         transform:scale(0.8);         -webkit-filte...
css tab切换动画
最新发布
10-13
可以使用CSS3的transition属性来实现tab切换动画。具体实现方法如下： 1. 首先，给每个tab添加一个共同的类名，比如.tab。 2. 给当前选中的tab添加一个.active类名，用于区分当前选中的tab。 3. 使用CSS3的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值