https://blog.csdn.net/u011558902/article/details/52442390

transform和@keyframes动画的区别

@keyframes动画是循环的，而transform只执行一遍

@keyframes

CSS3中添加的新属性animation是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。

承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器

创建动画的原理是将一套CSS样式逐渐变化为另一套模式
通过@keyframes规则，您能够创建动画
@keyframes定义一个动画，并定义具体的动画效果，比如放大还是位移
@keyframes它定义的动画并不直接执行，需要借助animation来运转
在动画过程中，它能够多次改变这套CSS样式
以百分比来规定改变发生的时间，或者通过关键词"from"和"to"，等价于0%和100%
为了获得最佳的浏览器支持，您应该时钟定义0%和100%选择器

语法

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。定义动画的名称。合法的值： 1. 0-100% 2. from（与 0% 相同） 3. to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

transform

含义：改变，使…变形；转换

rotate()

skew()

scale()

translate()

transform的属性包括:rotate()旋转/skew()倾斜/scale()比例/translate()位移,分别还有x、y之分，比如：rotatex()和rotatey()，以此类推

各个属性的用法

transform:rotate():旋转；其中10deg表示10度

transform:rotate(10deg)

transform：skew()

transform:skew(20deg);

transform:scale() “1.5"表示以1.5的比例放大，如果要放大2倍，须写成"2.0”，缩小则为负"-"

transform:scale(1.5);

transform:translate() 如下表示向右位移120像素，如果向上位移，把后面的"0"改个值就行，向左向下位移则为负"-"

transform:translate(120px,0);

综合在一起:(效果是动态)

transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0)

Vue F01 -- keyframe、transform详情与实例相关推荐

html下拉列表用ul,Vue.js做select下拉列表的实例(ul-li标签仿select标签)
目标:用ul-li标签结合Vue.js知识做一个模仿select标签的下拉选项列表. 知识点: 组件的写法及运用组件之间的数据传递(props的运用) 组件之间的数据传递($emit的运用) 动态数 ...
html 存储登录状态,Vue中保存用户登录状态实例代码
首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的. 登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个 ...
前端vue后端java,Vue调用后端java接口的实例代码_亦心_前端开发者
前段时间做了个学校的春萌项目,其中用到先上后端接口代码: package controller; import net.sf.json.JSONObject; import util.DBUtil ...
vue简单的图片相册幻灯片实例
vue简单的图片相册幻灯片实例 [原创]基于Vue.js构建的响应式的图片幻灯片,图片相册,大图切换展示代码.动态设置图片url路径,来实现简单的图片切换效果. 演示地址下载地址
简单介绍Vue中使用js-cookie详情
这篇文章主要介绍了Vue中使用js-cookie详情,文章围绕js-cookie的相关资料展开详细内容具有一定的的参考价值,需要的小伙伴可以参考一下一.安装js-cookie cnpm i -S j ...
vue动态获取css样式,Vue 框架之动态绑定 css 样式实例分析
今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分首先说一下动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使 ...
css逐帧动画图片太大怎么办,不建议使用 CSS3 keyframe transform 实现逐帧动画
© Young 2018-12-26 21:43 Welcome to My GitHub 一般在使用 CSS3 keyframe transform 实现逐帧动画时,往往会先把逐帧动画图片合成精灵图 ...
vue音乐项目歌手详情页小结
技术栈 1,vue 2,vuex 3,vue-router(子路由) 需求分析 1)歌手列表点击歌手会跳转到下级页面歌手详情页,歌手详情页由四个部分组成歌手图片返回按钮:点击返回歌手tab页随机 ...
Vue.js 监听属性简单实例
Vue.js 监听属性 watch,可以通过 watch 来响应数据的变化. watch:用来监听每一个属性的变化 watch这个对象里面都是函数,函数的名称是data中的属性名称,watch ...

Vue F01 -- keyframe、transform详情与实例

transform和@keyframes动画的区别

@keyframes

语法

transform

各个属性的用法

Vue F01 -- keyframe、transform详情与实例相关推荐

最新文章

热门文章