CSS3过渡和动画

CSS3过渡和动画

1、CSS3 2D变化:

translate()方法:

根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动

例如:-webkit-transform: translate(50px,100px); ———<chrome>是从左边元素移

50个像素,从顶部移动100个像素

rolate()方法:

在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转

例如:-webkit-transform: rotate(30deg); 是元素顺时针旋转30

scale()方法:

元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数

例如:transform: scale(2,3);表示宽度变大为2倍,高度变大为3倍

skew()方法:

包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜

skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

例如:-webkit-transform: skew(30deg,20deg)表示元素在X轴和Y轴上倾斜20度和30

2、CSS3 2D变化:

rotateX()和rotateY()方法:

围绕其在一个给定度数X轴和Y轴旋转的元素

例如:-webkit-transform: rotateX(130deg)表示绕着X轴旋转30度

3、CSS3 过渡

指定要添加效果的CSS属性
指定效果的持续时间

添加宽度变化的过渡:
  • 指定添加的CSS属性:当用户鼠标悬停时,改变div属性的宽度:
div:hover
{
    width:300px;
}
  • 指定效果的持续时间(宽度变化):
div
{
    transition: width 2s;
}
添加转换效果的过渡:
  • 指定css属性:改变div的变化效果
transform:rotate(80deg);
  • 指定效果的持续时间(转换效果),设置为2s
transition:transform 2s


过渡属性:

transition: property duration timing-function delay;

四个参数分别为:css属性的name,过渡过程所需时间,过渡时间曲线,过渡开始的
延长时间,且这些属性可单独使用

例如:transition-delay: 2s;设置过渡开始的延长时间为2s,当设置hover属性时,仅当悬停在此2s后才开始过渡

4、CSS3 动画:

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式

创建@keyframes规则(绑定一个选择器):
  • 规定动画的名称

  • 规定动画的时长

例如:把 "myfirst" 动画捆绑到 div 元素,时长:5

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}
定义动画的过程:
  • from{ }to{ }方法:

例如设定背景从红色黄色的动画:

@keyframes myfirst{
    from {background:red;}
    to {background:yellow;}
}
  • 百分比来规定变化发生时间方法:

例如设定当动画为25%50%改变背景色,然后当动画100%完成时再次改变

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

或者同时改变改变背景色位置

@keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}
CSS3的动画属性:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

参数分别为:绑定的选择器名称、动画持续的秒数、动画的时间曲线、动画的启动前的延长时长、动画的播放次数、指定是否轮流反向播放动画、规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时)要应用到元素的样式、指定动画是否正在运行已暂停

每个属性都可单独使用

例如设定一个但鼠标悬停在div上时暂停动画

div:hover{
    animation-play-state:paused
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,303评论 0 11
  • transition(过渡) 在CSS3引入transition之前css没有时间轴,所有的状态变化都是瞬间完成 ...
    風隨風去阅读 701评论 0 1
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,730评论 0 2
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,854评论 0 4
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,617评论 0 7