@keyframes、transform详解与实例

2024-06-12 00:32

本文主要是介绍@keyframes、transform详解与实例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

转自文章  https://segmentfault.com/a/1190000004460780#articleHeader5

一、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% 是动画的开始时间,50%是动画完成一半的时间,100% 动画的结束时间。百分比后面的花括号写:在动画执行过程中的某时间点要完成的变化。
  • 为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。


语法

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

例子1:

名字为gif@keyframes ,动画完成需要的总时长为1.4s,刚开始的时候图片旋转为0度,动画完成的时候图片旋转360度

.load-border {width: 120px;height: 120px;background: url(../images/loading_icon.png) no-repeat center center;-webkit-animation: gif 1.4s infinite linear;animation: gif 1.4s infinite linear; 
}
@keyframes gif {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}

例子2:

名字为mymove@keyframes ,动画完成需要的总时长为1s,刚开始的时候图片距顶部距离为0px0.25s后图片距顶部距离为200px0.5s后图片距顶部的距离为100px,以此类推

.img {width: 120px;height: 120px;background: url(../images/icon.png) no-repeat center center;-webkit-animation: gif 1.4s infinite linear;animation: mymove 1s infinite linear;
}
@keyframes mymove
{0%   {top:0px;}25%  {top:200px;}50%  {top:100px;}75%  {top:200px;}100% {top:0px;}
}

例子3:

在一个动画中改变多个 CSS 样式:

@keyframes mymove
{0%   {top:0px; background:red; width:100px;}100% {top:200px; background:yellow; width:300px;}
}

三、下面来说说transform:

transform的含义是:改变,使…变形;转换。

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);

这篇关于@keyframes、transform详解与实例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1052686

相关文章

使用Python删除Excel中的行列和单元格示例详解

《使用Python删除Excel中的行列和单元格示例详解》在处理Excel数据时,删除不需要的行、列或单元格是一项常见且必要的操作,本文将使用Python脚本实现对Excel表格的高效自动化处理,感兴... 目录开发环境准备使用 python 删除 Excphpel 表格中的行删除特定行删除空白行删除含指定

MySQL中的LENGTH()函数用法详解与实例分析

《MySQL中的LENGTH()函数用法详解与实例分析》MySQLLENGTH()函数用于计算字符串的字节长度,区别于CHAR_LENGTH()的字符长度,适用于多字节字符集(如UTF-8)的数据验证... 目录1. LENGTH()函数的基本语法2. LENGTH()函数的返回值2.1 示例1:计算字符串

Spring Boot spring-boot-maven-plugin 参数配置详解(最新推荐)

《SpringBootspring-boot-maven-plugin参数配置详解(最新推荐)》文章介绍了SpringBootMaven插件的5个核心目标(repackage、run、start... 目录一 spring-boot-maven-plugin 插件的5个Goals二 应用场景1 重新打包应用

mybatis执行insert返回id实现详解

《mybatis执行insert返回id实现详解》MyBatis插入操作默认返回受影响行数,需通过useGeneratedKeys+keyProperty或selectKey获取主键ID,确保主键为自... 目录 两种方式获取自增 ID:1. ​​useGeneratedKeys+keyProperty(推

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

Linux系统性能检测命令详解

《Linux系统性能检测命令详解》本文介绍了Linux系统常用的监控命令(如top、vmstat、iostat、htop等)及其参数功能,涵盖进程状态、内存使用、磁盘I/O、系统负载等多维度资源监控,... 目录toppsuptimevmstatIOStatiotopslabtophtopdstatnmon

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

Android ClassLoader加载机制详解

《AndroidClassLoader加载机制详解》Android的ClassLoader负责加载.dex文件,基于双亲委派模型,支持热修复和插件化,需注意类冲突、内存泄漏和兼容性问题,本文给大家介... 目录一、ClassLoader概述1.1 类加载的基本概念1.2 android与Java Class

Java中的数组与集合基本用法详解

《Java中的数组与集合基本用法详解》本文介绍了Java数组和集合框架的基础知识,数组部分涵盖了一维、二维及多维数组的声明、初始化、访问与遍历方法,以及Arrays类的常用操作,对Java数组与集合相... 目录一、Java数组基础1.1 数组结构概述1.2 一维数组1.2.1 声明与初始化1.2.2 访问

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected