CSS3动画与过渡

transform:在使用2D或3D转换前需用transform-style申明转换的类型,preserve-3d或者preserve-2d

属性

  translate():

    通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数移动。

  rotate():

    通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转.

    在3D下,有rotateX():向屏幕例外翻转;rotateY():在屏幕左右翻转,rotateZ():与2d下rotate()相同,在屏幕上顺时针或逆时针旋转。

  scale():

    通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数

  skew():

    通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数

transition:在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果

必须规定两项内容:

  • 规定您希望把效果添加到哪个 CSS 属性上
  • 规定效果的时长

例:transition:width 2s;

样式:ease 平缓变化  

  linear均匀变化

  ease-in 缓慢开始

  ease-out 缓慢结束

  ease-in-out 缓慢开始,缓慢结束

动画:首先要先用@keyframe 动画名  的格式定义一个动画,再用animation调用动画

@keyframe myfirst{

  from{}//开始效果

  to{}//结束效果

}

或@keyframe myfirst{

  0%{}      //也可以用百分比表示动画的进程

  30%{}

  70%{}

  100%{}

}

animation:

  animation-name: myfirst;   //动画名
  animation-duration: 5s;//动画时长
  animation-timing-function: linear;//动画变化效果,同transition
  animation-delay: 2s;//动画延迟播放时间
  animation-iteration-count: infinite;//infinite定义为无线循环
  animation-direction: alternate;//规定动画是否在下一周期逆向地播放。默认是 "normal"。

  animation-play-state:running//规定动画是否正在运行或暂停。默认是 "running"。

时间: 2025-01-04 15:24:30

CSS3动画与过渡的相关文章

css3动画:过渡

.dd { width: 100px; height: 100px; background: #24ff39 } .dd:hover { width: 200px; height: 200px; background: #ff1323 } 通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 请把鼠标移到下面的绿色方块上: CSS3 过渡是元素从一种样式逐渐改变为另一种的效果. 要实现这一点,必须规定两项内容:

CSS3动画 transition 过渡,宽度由中间向两边发生过渡

css .tapered_line{ width: 36px; height: 4px; background: #1e88e5; transition: width 3s; margin: 10px auto 0; } .main4 ul li:hover .tapered_line{ width: 220px; margin:10px auto 0; }

CSS3学习(CSS3过渡、CSS3动画)

CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加过渡效果.我们仅仅使用到了一个transition属性,专门来写过渡从一个样式到另一个样式过渡时所花费的时间,以秒为单位.若时长不规定,默认为0,即没有过渡时间.在使用这个过渡效果的时候,我们使用了类似于超链接的l(link).v(visited).h(hover).a(active)样式的控制.此

CSS3动画基本的转换和过渡

理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x,y);//平移,x代表向又移动距离,y代表向下移动距离: transform:scale(x,y);//缩放,x代表水平缩放倍数,y代表垂直缩放倍数: transform:rotate(x);//旋转,x代表顺时针旋转多少度,如rotate(10deg) : transform:skew(x,y)

【CSS3】transition过渡和animation动画

转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 写在前面的话: 最近写css动画发现把tansition和animation弄混淆了,而且发现两个动画叠加后在一个元素上后,动画效果没有了,最后想的办法是在里面再包一层元素,把两个动画分开在不同的元素上,这样动画效果不受影响了.在网上找了一个tansition和animation的区别: 一.transition CSS3的过渡功能就像是一种黄油,可以让CSS的一些变化变得平

从零开始学习前端开发 — 15、CSS3变形基础过渡、动画

一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 eg: transition: all 1s; ident 指定要过渡的css属性列表 eg: transition:border-radius 1s,background 2s; none 没有属性发生过渡 注:我们可以省略滑过状态或其他状态的过渡属性,但是不能省略初始状态的transition属性

使用 CSS3 动画实现的 3D 图片过渡特效

这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transition 属性的强大能力.随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 效果演示      插件下载 您可能感兴趣的相关文章 网站开发中很有用的 j

css3动画--边框线条动画

网上看到一个css3动画,地址 最开始思路是,里面一个DIV方块,右上角一个同样大小的div1,向上,向右平移8px,设div1的border-top,border-right值形成,如图所示 再用clip截取一半,形成半折角. 同理左下角建一个div,向左.向下平移8px,设border-left,border-bottom值,用clip截取形成 <div class="cont"> <div class="bb"></div>

【CSS3】transition过渡

一.transition CSS3的过渡功能就像是一种黄油,可以让CSS的一些变化变得平滑.因为原生的CSS过渡在客户端需要处理的资源要比用JavaScript和Flash少的多,所以才会更平滑. transition的属性 属性可以分开写,也可以放在一起写,比如下面的代码,图片的宽高本来都是15px,想要让它1秒的时间内过渡到宽高为450px,通过:hover来触发,那么代码就可以如下: img{ height:15px; width:15px; transition: 1s 1s heigh