首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在动画中打开opendoor效果css从右向左打开?

要实现在动画中打开opendoor效果,可以使用CSS的动画属性和关键帧动画来实现。下面是一个示例代码:

HTML代码:

代码语言:html
复制
<div class="door">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS代码:

代码语言:css
复制
.door {
  position: relative;
  width: 200px;
  height: 300px;
  perspective: 1000px;
}

.left, .right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-color: #ccc;
  transform-origin: left center;
  animation: openDoor 2s forwards;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

@keyframes openDoor {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-90deg);
  }
}

在上面的代码中,我们创建了一个门的效果,使用两个<div>元素分别表示门的左边和右边。通过设置transform-origin属性为左边缘,使得旋转动画的中心点在左边缘,实现从右向左打开的效果。

通过定义关键帧动画@keyframes,在0%和100%的关键帧中分别设置初始状态和最终状态的旋转角度,然后通过animation属性将动画应用到门的左边和右边元素上。

你可以将上述代码复制到一个HTML文件中进行测试,打开该文件后,你将看到一个从右向左打开的门的动画效果。

关于CSS动画和关键帧动画的更多详细信息,你可以参考腾讯云的CSS动画相关文档:CSS动画

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

0到1,开发一个动画库(1)

作者:jshao https://segmentfault.com/a/1190000012923589 如今市面上关于动画的开源库多得数不胜数,有关于CSS、js甚至是canvas渲染的,百花齐放,效果炫酷..., 、 、 、 ,及相应的回调函数 支持手动式触发动画的各种状态, 、 、 、 支持自定义路径动画 支持多组动画的链式触发 完整的项目在这里:点赞行为高尚!...OK,那如何在画中引入缓函数呢?不说废话,直接上代码。 首先我们在core.js中创建了一个类: 我们在构造函数中对实例调用函数,对其初始化:将传入的参数保存在实例属性中。...1.5倍,也就是把 1变成1.5 因此传入的value应该长成这样:。...代码中的是tween.js文件引入的缓函数,tween.js的代码如下(网上搜搜基本都差不多= =): 最后,给类增加方法: core.js的完整代码如下: 在html中引入它后就可以愉快地调用啦^

2K80

是的!Figma也可以用时间轴做超级流畅的动画了

将旋转点改为左上角后的移动效果 通过下面的图,大家可能看的更清楚一些。 ? 中心旋转点 ? 左上旋转点 ? 右下旋转点 4.2缓功能 缓功能控制加减速。...让我们尝试一下,我们依然选择将矩形Frame的左侧移动到右侧。选择最后一个关键帧并打开关键帧面板,然后更改缓功能并查看结果。 ? 线性运动 ? 缓入,启动时加速 ? 缓出,慢下来 ? 缓入缓出。...4.4 撤销/重做 当然,您可以撤消和重做动画中的任何更改。Ctrl / Cmd + Z代表撤消,Ctrl / Cmd + Y代表重做。...如果动画太慢,可以将其60更改为24。不用担心,这不会影响导出效果。 ? 4.7 重复 这里有3种效果: 1. 不再重复 2. 重复 3. 重复并暂停 ? 最后一个“重复并暂停”很有趣。...如果将缓功能设置为缓出,动画将看起来更加自然。选择结束关键帧,双击它以打开关键帧面板。您将看到“线性”缓功能。将其更改为“缓出”。 ? 点击播放按钮 ? 现在到500ms的位置上。

17.3K34

writing mode与4大文字系统

Demo见:http://ayqy.net/temp/writing-mode.html 起关键作用的CSS规则为: /* 竖直-向左 */ -webkit-writing-mode: vertical-rl...vertical-rl/lr分别表示纵向向左排列、纵向左向右排列。...,称为RTL 注意内联方向还是横向的,块方向从上到下,字符方向向上: arabic system 不仅文本流向左,布局相关的所有东西都是向左的,右上角开始,眼睛向左浏览,所以一般RTL站点的布局与...布局需要的CSS与上面相同: section { writing-mode: horizontal-tb; } 或者什么都不写,默认就是这样 另外,汉字系统也可以纵向排列,内联方向是竖向,块方向向左...,如图: han system 注意横向文本流左向右,而纵向文本流向左 整页的默认设置取决于场景,但每个元素,每行标题,每节,每篇文章都可以设置成与默认的相反。

1.6K20

三种方法实现CSS三栏布局

本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法 实现方法:需要左栏向左浮动,栏向右浮动,中间设左右margin来撑开距离 中间栏 注意:该方法在html布局时,要把中间栏放在左栏、栏后面,左栏和栏的顺序不定 实现的效果如下: 1.png 2.方法二:margin负值法 实现方法...:两边两栏宽度固定,中间栏宽度自适应,左栏、栏、中间栏向左浮动,左栏的margin-left设为-100%,中间栏的width设为100%,栏的margin-left设为-栏宽度 <!...实现的效果如下: 2.png 3.方法三:绝对定位法 实现方法:左栏、栏绝对定位,分别固定到页面左右两侧,中间栏不设宽度,用左右margin来撑开距离 实现的效果如下: 3.png

3.9K641

CSS】828- 纯CSS导航栏下划线跟随效果

所以我一直在想,有没有可能只使用 CSS 完成这个效果呢?...同理,当导航的右侧 li 移向左侧 li,下划线往左移动。 实现需求 第一眼看到这个效果,感觉这个跟随动画,仅靠 CSS 是不可能完成的。...同理,当导航的右侧 li 移向左侧 li,下划线往左移动。 我们仔细看看,现在的效果: ? 当第一个 li 切换到第二个 li 的时候,第一个 li 下划线收回的方向不正确。...效果不错,就是有点僵硬,我们可以适当改变缓函数以及加上一个动画延迟,就可以实现上述开头里的那个效果了。当然,这些都是锦上添花的点缀。...最后 本方法最大的瑕疵在于一开始进入第一个 li 的时候,线条只能是往左,除此之外,都能很好的实现跟随效果。 好了,本文到此结束,希望对你有帮助

2.8K20

不可思议的纯CSS导航栏下划线跟随效果

先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。 OK,继续。...同理,当导航的右侧 li 移向左侧 li,下划线往左移动。 实现需求 第一眼看到这个效果,感觉这个跟随动画,仅靠 CSS 是不可能完成的。...现在还剩下一个最难的问题: 如何让线条跟随光标的移动动作,实现当导航的左侧 li 移向右侧 li,下划线从左往右移动。同理,当导航的右侧 li 移向左侧 li,下划线往左移动。...看看: 效果不错,就是有点僵硬,我们可以适当改变缓函数以及加上一个动画延迟,就可以实现上述开头里的那个效果了。当然,这些都是锦上添花的点缀。...完整的DEMO可以戳这里: CodePen Demo -- 不可思议的CSS光标下划线跟随效果 最后 本方法最大的瑕疵在于一开始进入第一个 li 的时候,线条只能是往左,除此之外,都能很好的实现跟随效果

2.1K30

不可思议的纯CSS导航栏下划线跟随效果

先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。 OK,继续。...同理,当导航的右侧 li 移向左侧 li,下划线往左移动。 实现需求 第一眼看到这个效果,感觉这个跟随动画,仅靠 CSS 是不可能完成的。...现在还剩下一个最难的问题: 如何让线条跟随光标的移动动作,实现当导航的左侧 li 移向右侧 li,下划线从左往右移动。同理,当导航的右侧 li 移向左侧 li,下划线往左移动。...看看: 效果不错,就是有点僵硬,我们可以适当改变缓函数以及加上一个动画延迟,就可以实现上述开头里的那个效果了。当然,这些都是锦上添花的点缀。...完整的DEMO可以戳这里: CodePen Demo -- 不可思议的CSS光标下划线跟随效果 最后 本方法最大的瑕疵在于一开始进入第一个 li 的时候,线条只能是往左,除此之外,都能很好的实现跟随效果

1.7K30

图像特效显示(下)

图像的平移 移动是将图像看作一个整体,显示时不能像扫描那样,扫描方式有些像打开一副画,例如显示上部分的时候,下部分可以不现实,而移动则可以看成一块木板画,显示时必须按物理顺序进行,例如从上向下平移时,必须先显示下面的图像...中间扩张 当我们打开电视机时,都有这样的感觉:电视图像是屏幕中间开始,向上下两个方向展开的,这种效果就是中间扩张。...中间扩张特效显示的原理其实并不难,在显示的时候,先将图像分成两部分,将中间分界处显示在屏幕中央,并快速向上向下扫描图像,最后将图像完整的显示在屏幕上,这样人们因为视觉生理的特点就会看到中间扩张的效果。...水平栅条特效 栅条特效分为水平栅条和垂直栅条,其效果如同将两手交叉的过程,栅条显示的原理是先将图像分为若干行,将奇数行组成一组,偶数行组成一组,在显示时奇数行向左平移,偶数行左向右平移。...< ImageWidth+1; i=i+10) {//步长为1 for (int j = 0; j < ImageHeigth; j=j+2*step) {//步长为1 //奇数行往左

91830

不可思议的纯CSS导航栏下划线跟随效果

先上张图,如何使用纯 CSS 制作如下效果? ? 在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。 OK,继续。...同理,当导航的右侧 li 移向左侧 li,下划线往左移动。 实现需求 第一眼看到这个效果,感觉这个跟随动画,仅靠 CSS 是不可能完成的。...navunderline 左移左出,右移出 OK,感觉离成功近了一步。现在还剩下一个最难的问题: 如何让线条跟随光标的移动动作,实现当导航的左侧 li 移向右侧 li,下划线从左往右移动。...同理,当导航的右侧 li 移向左侧 li,下划线往左移动。 我们仔细看看,现在的效果: ?...underlineawhere 效果不错,就是有点僵硬,我们可以适当改变缓函数以及加上一个动画延迟,就可以实现上述开头里的那个效果了。当然,这些都是锦上添花的点缀。

1.5K20

效设计原理:卡通动画到UI

但是我们还是可以借鉴卡通效的优点,情感和认知层面上将两者的优势相结合。...例如,用户知道点击图标将打开一个窗口,但是突然的变化(突然图标变成窗口)也会让用户迟疑。 卡通中的动画效果,非常擅长于提供足够的信息让观众理解。...这里选择一些同时符合UI和动画的设计原则,同时展示了如何在UI设计中应用。 我们3个维度来讨论,分别是:拟物化,夸张和增强现实。...动画师们将这种观察使用在动画中,当动画中的主体物停止后,其他部分细节依然可以运动。包括了身体,衣服,和一些局部的动作处理,让其效变的更加极致。 ?...由于工作的严谨性,需要排除漫画中的娱乐元素。卡通往往古怪且愚蠢,如果这种古怪足以让用户理解用户界面的功能,那这种古怪则可以保留。例如,动画可以用在第一次打开软件时,给用户一个惊喜。

2.6K80

效设计原理:卡通动画到UI效 - 腾讯ISUX

但是我们还是可以借鉴卡通效的优点,情感和认知层面上将两者的优势相结合。 Keywords UI、动画效果、卡通 1....例如,用户知道点击图标将打开一个窗口,但是突然的变化(突然图标变成窗口)也会让用户迟疑。 卡通中的动画效果,非常擅长于提供足够的信息让观众理解。...这里选择一些同时符合UI和动画的设计原则,同时展示了如何在UI设计中应用。 我们3个维度来讨论,分别是:拟物化,夸张和增强现实。...动画师们将这种观察使用在动画中,当动画中的主体物停止后,其他部分细节依然可以运动。包括了身体,衣服,和一些局部的动作处理,让其效变的更加极致。...由于工作的严谨性,需要排除漫画中的娱乐元素。卡通往往古怪且愚蠢,如果这种古怪足以让用户理解用户界面的功能,那这种古怪则可以保留。例如,动画可以用在第一次打开软件时,给用户一个惊喜。

1.7K20

CSS Transitions

以下是如何在CSS中使用这些属性的示例: /* 对width属性应用过渡效果,持续0.5秒,使用ease-in-out时间函数,延迟0.2秒 */ .element { transition-property...(如果想看效果,可以code 链接[6]中查看效果,这节中的效果都可以查看)。瞬间完成的效果,显然不满足我们的需求。...例如:假设我们正在将一个元素左移动到,持续1秒。流畅的动画应该以60帧每秒的速度运行,这意味着我们需要「在起始和结束之间计算出60个单独的位置」。...时间函数描述了一个值如何在固定时间间隔内0到1,而不是动画应该多快完成。一些时间函数可能会感觉更快或更慢,但在这些示例中,它们都需要完全1秒来完成。...* ease */ transition-timing-function: cubic-bezier(0.44, 0.21, 0, 1); } 这些自定义的时间函数替代方案可以让我们在动画中使用更具表现力的缓效果

25030

Angular2 之 Animations

Angular2的动画系统赋予了制作各种动画效果的能力,致力于构建出与原生CSS动画性能相同的动画。 Angular2的动画主要是和@Component结合在了一起。...动画中可以的属性和单位 由于Angular的动画支持基于Web Animations标准的,所以也能支持浏览器认为可以参与动画的任何属性。...动画时间线 对每一个动画转场效果,有三种时间线属性可以调整:持续时间(duration)、延迟(delay)和缓(easing)函数。...它们被合并到了一个单独的转场时间线字符串 持续时间 持续时间控制动画开始到结束要花多长时间。...可以用三种方式定义持续时间: 作为一个普通数字,以毫秒为单位,:100 作为一个字符串,以毫秒为单位,:'100ms' 作为一个字符串,以秒为单位,:'0.1s' 延迟 延迟控制的是在动画已经触发但尚未真正开始转场之前要等待多久

1.9K10

idea快捷键

(对于前端支持很好,比如可以直接通过class的name定位到css的文件位置)(等同于ctrl+光标指向) Ctrl + E 最近打开的文件 Ctrl + U 前往父类的方法/父类 Ctrl +...(相当于Ctrl+alt+F12) Ctrl + 方向左/ 光标跳到上/下个单词 Ctrl + 方向上/下 相当于你用鼠标滑滚轮(为了方便鼠标党) =======================...,set方法,构造函数等) Alt + 方向键 左 或 方向键 切换当前打开的代码文件视图 Alt + 方向键 上 或 方向键 下 在方法间快速移动定位 Alt + 鼠标左键单击不放,拖动 可以直接方块区域选择...Ctrl + Alt + 方向左/ 退回/前进到上一个操作的地方 Ctrl + Alt + 方向上/下 在Find模式下,挑到上/下个查找的文件 Ctrl + Alt + 空格 类名或接口名提示...,一般敲入字母都会提示,但是如果你不小心esc了,可以再按这个出来) Ctrl + Shift + 方向左 选中临边左/的单词或是符号 Ctrl + Shift + Backspace(退格

1.9K50

前端开发中web和移动端动画的常见实现方式

动画SVG 动画Canvas 动画WebGL 动画gif 图图片+位移模拟动画视频flash 动画css 动画css 动画应该是前端工作中用得最多的,兼具性能和丰富的动画效果,很多常见的第三方动画库也都是基于...会有一套自己的解析规则来直接里面取,具体可以参考 MDN,看着脑阔痛,推荐还是别简写了。...css 的动画效果也都是可以直接作用在 svg 元素上的。...除此之外,SVG 中也自带 animate 元素,可以直接用来创建动画,css 中的动画效果也都能用其实现,相比 css 动画 svg 可以实现出更加复杂的动画效果路径动画、描边动画等,很多网站的...前面我们提到的各种动画都是基于 2D 的二维图形动画,像 css画中虽然也有 z 轴的概念,但是和真实的三维效果还是有很大差距的。

49020

玩转AE丨效设计必备指南

如今效设计也有了更多的解决方案,Framer、Principle、Flinto、Protopie等,这些软件在制作交互原型时,确实有更轻量便捷的优势,但效果也有一定的局限性,或者要求使用者有代码基础...AE2014版本后就不支持Gif导出了,而Gifgun就是一款能很好地导出Gif格式的插件。 Gifgun导出的格式小巧清晰,本文所有图就是用这款插件导出,真香。...向左移动关键帧一帧:Option + 左箭头 向右移动关键帧十帧:Option + Shift + 箭头 向左移动关键帧十帧:Option + Shift + 左箭头 缓关键帧:F9 | 时间指针操作...3.1 播放型效输出 播放型效是指在输出时效果就已经固定的效,满足触发条件后播放出来,过程中并不会有影响效果的元素。...例如常见的APP底部导航点击效果,icon效在用户点击时触发播放,这个效果在输出时就是固定的,不受任何其他因素影响,可以由设计师直接导出。

1.8K43
领券