草庐IT

animation的八大属性及HTML基础动画效果——平移、旋转、缩放、倾斜、过渡

.慢慢亦漫漫 2024-04-27 原文

1.动画（animation）的8个属性及 关键帧

animation：复合属性，设置对象的动画属性，共有8个属性

1.1 animation-name

作用：设置对象所应用的动画名称
书写格式：@keyframes 动画名称

 .box{
        margin: auto;
        width: 200px;
        height: 600px;
        padding-top: 150px;
        transform-style: preserve-3d;
        animation: flesh 5s 10;
    }
    @keyframes flesh{
        form{
            transform: rotateX(0) rotateY(0);
        }
        to{
            transform: rotatey(360deg) rotatex(45deg);
        }
    }

1.2 animation-duration

animation-duration主要用来设置动画的持续时间

1.3 transition-timing-function

transition-timing-function属性用来设置动画的过渡类型，它的常用取值如下：

  • linear：线性过渡
  • ease：平滑过渡
  • ease-in：由慢到快
  • ease-out：由快到慢
  • ease-in-out：由慢到快再到慢

1.4 animation-delay

animation-delay属性设置动画的延迟时间，一般属性常用取值取数字

1.5 animation-iteration-count

animation-iteration-count 属性设置动画的循环次数
属性取值：

  • infinite：无限循环
  • number: 循环的次数

1.6 animation-direction

animation-direction属性设置动画是否反向运动
常用属性取值如下：

  • normal：正方向运行
  • reverse：反方向运行
  • alternate：动画先正常运行再反方向运行，并持续交替运行
  • alternate-reverse：动画先反运行再正方向运行，并持续交替运行

1.7 animation-play-state

animation-play-state属性设置动画的状态
常用取值：

  • running:运动
  • paused: 暂停

1.8 animation-fill-mode

animation-fill-mode属性设置动画时间之外的状态
常用取值：

  • none:默认值，不设置对象动画之外的状态
  • forwards:设置对象状态为动画结束时的状态
  • backwards:设置对象状态为动画开始时的状态
  • both:设置对象状态为动画开始或结束时的状态

1.9关键帧

  • 可用from to
  • 百分比直接定义

2.变换元素的位置——平移

  • transform属性取值为translate（x，y）时，表示元素的平移。
  • 属性取值：数值、百分比，x轴取负值表示向左移动，y轴取负值表示向上移动
@keyframes flesh{
        from{
            transform: translateX(0);
        }
        to{
            transform: translateX(-400px);
        }
    }

3. 改变元素的状态——旋转

  • 旋转：围绕着指定的轴，按照指定的角度发生的旋转
  • 函数：rotateX rotateY
  • 函数取值：数字
  • 单位：deg（度数）
  • 取值为正顺时针旋转，取值为负逆时针旋转

4.改变元素的大小——缩放

  • 缩放：改变元素的大小
  • 函数：scale（x，y）
  • 若scale的取值只有一个，那么表示xy轴同时改变相同的倍数

5.改变元素的形态——倾斜

  • 函数：skew()
  • 取值 ：为角度

6.过渡

6.1 什么是过渡

过渡：元素从一个状态到另外一个状态的平滑变换的过程
过渡属性：transition

6.2 过渡的四要素

6.2.1 transition-property

  • transition-property：元素的哪个状态发生变化时要使用过渡的效果，当指定的属性发生改变时，就会触发过渡效果。
  • 语法：
    transition-property:none | all | property
    transition-property:background;
    transition-property:all;

6.2.2 transition-duration

  • transition-duration：过渡效果的完成时间，通常以秒和毫秒为单位
  • 语法：
    transition-duration:1s;

6.2.3 transition-timing-function

transition-timing-function：指定时间内(transition-duration)过渡的速度效果
取值：

  • ease : 默认值，慢速开始，速度变快，慢速结束
  • linear:匀速开始到结束
  • ease-in:慢速开始，加速效果(由慢到快)
  • ease-out:慢速结束，减速效果(由快到慢)
  • ease-in-out:以慢速开始和结束，先加速再减速

6.2.4 transition-delay

transition-delay：过渡延迟时间，以秒或毫秒作为单位

mdash过渡spanclasstoken动画htmlcss3

有关animation的八大属性及HTML基础动画效果——平移、旋转、缩放、倾斜、过渡的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - 如果为空或不验证数值，则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  3. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah

  4. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  5. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  6. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  7. ruby - Nokogiri 剥离所有属性 - 2

    我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点？ 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者，如果您需要做一些更复杂的事情，有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog

  8. ruby-on-rails - Rails 模型——非持久类成员或属性？ - 2

    对于Rails模型，是否可以/建议让一个类的成员不持久保存到数据库中？我想将用户最后选择的类型存储在session变量中。由于我无法从我的模型中设置session变量，我想将值存储在一个“虚拟”类成员中，该成员只是将值传递回Controller。你能有这样的类(class)成员吗？ 最佳答案 将非持久属性添加到Rails模型就像任何其他Ruby类一样:classUser扩展解释:在Ruby中，所有实例变量都是私有(private)的，不需要在赋值前定义。attr_accessor创建一个setter和getter方法:classUs

  9. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  10. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

随机推荐