Главная » Языки программирования

Html codes with animation

Содержание
  1. 95 CSS Animation Examples
  2. Related Articles
  3. Author
  4. Links
  5. Made with
  6. About a code
  7. Old Film Effect — Pure CSS Animation
  8. Author
  9. Links
  10. Made with
  11. About a code
  12. Nosferatu — Pure CSS Animation
  13. Author
  14. Links
  15. Made with
  16. About a code
  17. Animation Delay
  18. Author
  19. Links
  20. Made with
  21. About a code
  22. CSS Sprite Stop Motion Animation
  23. Author
  24. Links
  25. Made with
  26. About a code
  27. Pure CSS Blooming Flowers with Falling Leaves
  28. Author
  29. Links
  30. Made with
  31. About a code
  32. One DIV Growing Flower
  33. Author
  34. Links
  35. Made with
  36. About a code
  37. Circles and Lines
  38. Author
  39. Links
  40. Made with
  41. About a code
  42. Pure CSS Animation Kaleidoscope
  43. Author
  44. Links
  45. Made with
  46. About a code
  47. Dot Dash
  48. Author
  49. Links
  50. Made with
  51. About a code
  52. Dashboard Ilustration Animated Only with CSS
  53. Author
  54. Links
  55. Made with
  56. About a code
  57. Pure CSS Magic Gateways with Houdini
  58. Author
  59. Links
  60. Made with
  61. About a code
  62. CSS only Camera Shutter
  63. Author
  64. Links
  65. Made with
  66. About a code
  67. Netflix Intro Animation Pure CSS
  68. Author
  69. Links
  70. Made with
  71. About a code
  72. Berlin Animated
  73. Author
  74. Links
  75. Made with
  76. About a code
  77. Checkerboard Reveal
  78. Author
  79. Links
  80. Made with
  81. About a code
  82. Cinematic Animation
  83. Author
  84. Links
  85. Made with
  86. About a code
  87. Welcome
  88. Author
  89. Links
  90. Made with
  91. About a code
  92. AnimXYZ Example
  93. Author
  94. Links
  95. Made with
  96. About a code
  97. Bird Animation
  98. Author
  99. Links
  100. Made with
  101. About a code
  102. Mood Swing
  103. Author
  104. Links
  105. Made with
  106. About a code
  107. Neumorphism Animation
  108. Author
  109. Links
  110. Made with
  111. About a code
  112. CSS Animation with Motion
  113. Author
  114. Links
  115. Made with
  116. About a code
  117. Day and Night: CSS Transitions and Animations Explained
  118. Author
  119. Links
  120. Made with
  121. About a code
  122. Desk CSS Animation
  123. Author
  124. Links
  125. Made with
  126. About a code
  127. Only CSS: Moon Clip
  128. Author
  129. Links
  130. Made with
  131. About a code
  132. CSS is Awesome
  133. Author
  134. Links
  135. Made with
  136. About a code
  137. CSS Animated 3D Toaster
  138. Author
  139. Links
  140. Made with
  141. About a code
  142. CSS Only Animated Solar System
  143. Author
  144. Links
  145. Made with
  146. About a code
  147. Folding Panorama Animation
  148. Author
  149. Links
  150. Made with
  151. About a code
  152. CSS Animation SVG Building
  153. Author
  154. Links
  155. Made with
  156. About a code
  157. Close the Blinds
  158. Author
  159. Links
  160. Made with
  161. About a code
  162. CSS Animations with SVGs
  163. Author
  164. Links
  165. Made with
  166. About a code
  167. Pure CSS Eye
  168. Author
  169. Links
  170. Made with
  171. About a code
  172. Sausage Dog CSS Only Animation
  173. Author
  174. Links
  175. Made with
  176. About a code
  177. Rock’N’Roll Half-Marathon Animation
  178. Author
  179. Links
  180. Made with
  181. About a code
  182. Letter CSS Animation
  183. Author
  184. Links
  185. Made with
  186. About a code
  187. Evening Lanterns
  188. Author
  189. Links
  190. Made with
  191. About a code
  192. The Three-Body Problem
  193. Author
  194. Links
  195. Made with
  196. About a code
  197. 2020 SVG Animation
  198. Author
  199. Links
  200. Made with
  201. About a code
  202. CSS Block Revealing Effect
  203. Author
  204. Links
  205. Made with
  206. About a code
  207. Only CSS 3D Cube
  208. Author
  209. Links
  210. Made with
  211. About a code
  212. Web Layers Of Pace
  213. Author
  214. Links
  215. Made with
  216. About a code
  217. CSS Typewriter
  218. Author
  219. Links
  220. Made with
  221. About a code
  222. Only CSS: Motion Blur
  223. Author
  224. Links
  225. Made with
  226. About a code
  227. Animation with Offset Motion Blur
  228. Author
  229. Links
  230. Made with
  231. About a code
  232. Only CSS Animation #02
  233. Author
  234. Links
  235. Made with
  236. About a code
  237. Only Css Animation #03
  238. Author
  239. Links
  240. Made with
  241. About a code
  242. Paper Pirouette
  243. Author
  244. Links
  245. Made with
  246. About a code
  247. Only CSS Animation #01
  248. Author
  249. Links
  250. Made with
  251. About a code
  252. Circle Becomming Square
  253. Author
  254. Links
  255. Made with
  256. About a code
  257. The Perpetual Mobile
  258. Author
  259. Links
  260. Made with
  261. About a code
  262. Product Page
  263. Author
  264. Links
  265. Made with
  266. About a code
  267. Fake Variable Font with CSS
  268. Author
  269. Links
  270. Made with
  271. About the code
  272. SVG Animation
  273. Author
  274. Links
  275. Made with
  276. About a code
  277. Transform-box: fill-box
  278. Author
  279. Links
  280. Made with
  281. About the code
  282. Animated Sticker
  283. Author
  284. Links
  285. Made with
  286. About the code
  287. Rock Hand Animation
  288. Author
  289. Links
  290. Made with
  291. About the code
  292. H2O — Chemical Flask Animation
  293. Author
  294. Links
  295. Made with
  296. About the code
  297. Pure CSS Submarine Animation
  298. Author
  299. Links
  300. Made with
  301. About the code
  302. Candles (Pure CSS Animation)
  303. Author
  304. Links
  305. Made with
  306. About the code
  307. Whale And The Moon
  308. Author
  309. Links
  310. Made with
  311. About the code
  312. CSS Cassette Animation
  313. Author
  314. Links
  315. Made with
  316. About the code
  317. Coffee Machine Animation
  318. Author
  319. Links
  320. Made with
  321. About the code
  322. Solar Eclipse Animation
  323. Author
  324. Links
  325. Made with
  326. About the code
  327. CSS Box Dog Animation
  328. Author
  329. Links
  330. Made with
  331. About the code
  332. CSS Lighthouse Scene
  333. Author
  334. Links
  335. Made with
  336. About the code
  337. Bits And Bytes CSS Animation
  338. Author
  339. Links
  340. Made with
  341. About a code
  342. Crypto Web3 Blockchain Animation
  343. Author
  344. Links
  345. Made with
  346. About the code
  347. Dot Menu Animations
  348. Author
  349. Links
  350. Made with
  351. About the code
  352. Loop Animation
  353. Author
  354. Links
  355. Made with
  356. About the code
  357. Pure CSS Moustached Nanny Animation
  358. Author
  359. Links
  360. Made with
  361. About the code
  362. The Handbook Animation
  363. Author
  364. Links
  365. Made with
  366. About the code
  367. Books Hover Animation
  368. Author
  369. Links
  370. Made with
  371. About the code
  372. Connected Animation
  373. Author
  374. Links
  375. Made with
  376. About the code
  377. Responsive And Animated Windmill
  378. Author
  379. Links
  380. Made with
  381. About a code
  382. CSS Mask Animation
  383. Author
  384. Links
  385. Made with
  386. About the code
  387. CSS Animation: Time of Day
  388. Author
  389. Links
  390. Made with
  391. About the code
  392. CSS Animation: Indoors or Outdoors?
  393. Author
Читайте также:  Svm python что это

95 CSS Animation Examples

Collection of free HTML and CSS animation code examples from Codepen, Github and other resources. Update of June 2021 collection. 18 new items.

Author

Made with

About a code

Old Film Effect — Pure CSS Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Nosferatu — Pure CSS Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Animation Delay

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Sprite Stop Motion Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Pure CSS Blooming Flowers with Falling Leaves

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

One DIV Growing Flower

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Circles and Lines

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Pure CSS Animation Kaleidoscope

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Dot Dash

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Dashboard Ilustration Animated Only with CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Pure CSS Magic Gateways with Houdini

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Made with

About a code

CSS only Camera Shutter

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Netflix Intro Animation Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Berlin Animated

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Checkerboard Reveal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Cinematic Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Welcome

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

AnimXYZ Example

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Bird Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Mood Swing

An infinitely looping animation in CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Neumorphism Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Animation with Motion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Day and Night: CSS Transitions and Animations Explained

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Desk CSS Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Only CSS: Moon Clip

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS is Awesome

A zero div infinite zoom animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Animated 3D Toaster

Click the toaster for bread flips. Hover page edges to rotate.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Only Animated Solar System

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Folding Panorama Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Animation SVG Building

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Close the Blinds

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Animations with SVGs

Transitions & animations combined with SVGs.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Pure CSS Eye

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Sausage Dog CSS Only Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Rock’N’Roll Half-Marathon Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Letter CSS Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Evening Lanterns

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

The Three-Body Problem

Inspired by Liu Cixin’s Sci-Fi novel ‘The Three-Body Problem’.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

2020 SVG Animation

David Khourshid and Stephen Shaw celebrate the new year with this fun 2020 animation using hand-drawn SVG paths while showing how to simplify stroke-dasharray/stroke-dashoffset animations with pathLength=1 .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Block Revealing Effect

Change —td (total duration) to increase/decrease the time of the effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Only CSS 3D Cube

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Web Layers Of Pace

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Typewriter

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Only CSS: Motion Blur

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Animation with Offset Motion Blur

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Only CSS Animation #02

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Only Css Animation #03

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Paper Pirouette

3D CSS-only flying page animation.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About a code

Only CSS Animation #01

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Circle Becomming Square

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

The Perpetual Mobile

The rotation movement is not directly related to the movement, so there are no obvious repetitions and the animation is more attractive.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Product Page

Product page with CSS keyframes animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Fake Variable Font with CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

SVG Animation

Some SVG animation & keyframes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Transform-box: fill-box

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Animated Sticker

Animated sticker in HTML and CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About the code

Rock Hand Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

H2O — Chemical Flask Animation

SVG chemical flask is slightly animated with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Pure CSS Submarine Animation

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About the code

Candles (Pure CSS Animation)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Whale And The Moon

Pure CSS whale and the moon animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

CSS Cassette Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Coffee Machine Animation

Coffee machine pure CSS animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Solar Eclipse Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

CSS Box Dog Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

CSS Lighthouse Scene

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About the code

Bits And Bytes CSS Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Crypto Web3 Blockchain Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Dot Menu Animations

Author

Made with

About the code

Dot Menu Animations

Four different menu animations for menu button toggle between dots, cross and back icon.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About the code

Loop Animation

Magnifying glass scrolling loop animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Pure CSS Moustached Nanny Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: The Handbook Animation

Author

Made with

About the code

The Handbook Animation

The handbook download animation.

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Books Hover Animation

Author

Made with

About the code

Books Hover Animation

Good hover animation for book cover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Connected Animation

Author

Made with

About the code

Connected Animation

Simple connected animation for modal windows.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About the code

Responsive And Animated Windmill

Windmill (Pug + SCSS) — responsive & animated.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Mask Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Animation: Time of Day

Author

Made with

About the code

CSS Animation: Time of Day

CSS animations experiment.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: simple-line-icons.css, jquery.js

Demo image: CSS Animation: Indoors or Outdoors?

Author

Made with

About the code

CSS Animation: Indoors or Outdoors?

Recently was involved in a project where we had to do animations. We used After Effects > JSON > some plugin magic for it but I was wondering if I could replicate the exact same effect with CSS. — Olivia

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: simple-line-icons.css, jquery.js

Demo image: CSS Only Border Animation

Author

Источник

Оцените статью
© 2024 Программирование