API tools faq
paste
Advertisement
decembre

CSS - ANIMATION - TRANSFORMATION v.1

decembre
May 8th, 2016
293
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.29 KB | None | 0 0
raw download clone embed print report
  1.  
  2. ============================
  3. ======== CSS - ANIMATION - TRANSFORMATION v.1 - POSTé
  4. ============================
  5.  
  6. ============================
  7. =========== Exemple PERSO - EDU Sans Frontiére =
  8. == http://www.educationsansfrontieres.org/rubrique461.html
  9. .la.pas_recent .ancre1 .intro {
  10. /* visibility: visible;*/
  11. opacity: 0 !important;
  12. width: 148% !important;
  13. }
  14. .la.pas_recent:hover .ancre1 .intro {
  15. /* visibility: visible;*/
  16. opacity: 1 !important;
  17. width: 148% !important;
  18. -moz-transition: 1s opacity ease !important;
  19. }
  20.  
  21.  
  22. ============================
  23. =========== ANIMATION TRANSFORM 3D : translate3d
  24. == http://www.pageresource.com/css3/3d-transforms-tutorial/
  25. .masonry_box.board_info_box + .small_pin_box {
  26. /* transform: translate3d(-283px, 0px, 0px) !important; */
  27. /* position: relative !important; */
  28. display: inline-block !important;
  29. /* float: left !important;
  30. clear: left !important; */
  31. max-height: 200px !important;
  32. min-height: 200px !important;
  33. left: -14% !important;
  34. bottom: 5px !important;
  35. padding: 5px 1px 5px 5px !important;
  36. border-radius: 3px;
  37. box-shadow: 6px 5px 6px black !important;
  38. /* box-shadow: 2px 2px 2px rgba(162, 160, 160, 0.9) !important;*/
  39. font-size: 11px;
  40. border: 1px solid gray !important;
  41. background-color: #222222 !important;
  42. overflow: hidden !important;
  43. }
  44.  
  45.  
  46.  
  47. ============================
  48. =========== ANIMATION KEYFRAME INFO : you can't use !important in @keyframes rule.
  49. == https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
  50. == https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
  51. Configuring the animation:
  52. To create a CSS animation sequence,
  53. you style the element you want to animate with
  54. the animation property or its sub-properties.
  55. This lets you configure the timing and duration of the animation,
  56. as well as other details of how the animation sequence should progress.
  57. This does not configure the actual appearance of the animation,
  58. which is done using the @keyframes at-rule as described
  59. in Defining the animation sequence using keyframes below.
  60.  
  61. The sub-properties of the animation property are:
  62.  
  63. animation-delay
  64. Configures the delay between the time the element is loaded and the beginning of the animation sequence.
  65. animation-direction
  66. Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.
  67. animation-duration
  68. Configures the length of time that an animation should take to complete one cycle.
  69. animation-iteration-count
  70. Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.
  71. animation-name
  72. Specifies the name of the @keyframes at-rule describing the animation's keyframes.
  73. animation-play-state
  74. Lets you pause and resume the animation sequence.
  75. animation-timing-function
  76. Configures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves.
  77. animation-fill-mode
  78. Configures what values are applied by the animation before and after it is executing.
  79.  
  80. == ANIMATION KEYFRAME - EXAMPLE @keyframe
  81. ==
  82. @keyframes makando_fade {
  83. from { opacity: 0;}
  84. to {opacity: 1;}
  85. }
  86. #view-code {
  87. -moz-animation-name: makando_fade;
  88. -moz-animation-duration: 2s;
  89. -moz-animation-delay: 0.5s;
  90. -moz-animation-direction: reverse;
  91. -moz-animation-fill-mode: forwards;
  92. }
  93. #view-code:hover {
  94. opacity: 1 !important;
  95. }
  96.  
  97. ============================
  98. =========== ANIMATION KEYFRAME - EXAMPLE @keyframe
  99. == TEXTE - BLINK : NEW SOLUTION: Imitating a blink tag with CSS3 animations
  100. == http://stackoverflow.com/questions/13955163/imitating-a-blink-tag-with-css3-animations
  101. blink {
  102. display: inline;
  103. color: inherit;
  104. animation: blink 1s steps(1) infinite;
  105. -webkit-animation: blink 1s steps(1) infinite;
  106. }
  107. @keyframes blink { 50% { color: transparent; } }
  108. @-webkit-keyframes blink { 50% { color: transparent; } }
  109.  
  110. == EXAMPLE @keyframe
  111. == GLOSS SHADOW
  112. == http://jsfiddle.net/T88X5/3/light/
  113. body { font-family: Arial, Helvetica, "Liberation Sans", sans-serif; }
  114.  
  115. #loader {
  116. background: #ddd;
  117. color: #333;
  118. border-radius: 4px;
  119. padding: 4px;
  120. display: inline-block;
  121. -webkit-box-shadow: 0 0 5px #333;
  122. box-shadow: 0 0 5px #333;
  123.  
  124. -moz-animation-name: glow;
  125. -moz-animation-duration: .8s;
  126. -moz-animation-iteration-count: infinite;
  127. -moz-animation-timing-function: linear;
  128. -moz-animation-direction: alternate;
  129.  
  130. -webkit-animation-name: glow;
  131. -webkit-animation-duration: .8s;
  132. -webkit-animation-iteration-count: infinite;
  133. -webkit-animation-timing-function: linear;
  134. -webkit-animation-direction: alternate;
  135. }
  136.  
  137. @-moz-keyframes glow {
  138. from { box-shadow: 0 0 5px #333; }
  139. to { box-shadow: 0 0 10px #046; }
  140. }
  141. @-webkit-keyframes glow {
  142. from { -webkit-box-shadow: 0 0 5px #333; }
  143. to { -webkit-box-shadow: 0 0 10px #046; }
  144. }
  145.  
  146.  
  147. ============================
  148. =========== A ETUDIER : ANIMATION =
  149. ==http://leaverou.github.com/animatable/
  150. ==EXEMPLE :
  151. #on-hover:checked ~ div[role="main"] > a[data-property]:not(:hover):not(:target),
  152. body.in-page a[data-property]:not(:target) {
  153. -moz-animation: 0s ease 0s normal none 1 none !important;
  154. }
  155.  
  156. ======== A ETUDIER : ANIMATION SLIDEBOX ARROWS
  157. == https://developer.mozilla.org/en-US/demos/detail/paperfold-css
  158. == ARROW SPRITES : https://developer.cdn.mozilla.net/media/img/demos/nav-slide.png
  159. #demobox .slider .panel {
  160. margin: 0;
  161. }
  162. #demobox .nav-slide {
  163. list-style: none outside none;
  164. margin: 0;
  165. padding: 0;
  166. }
  167. #demobox .nav-slide a {
  168. background: url("../img/demos/nav-slide.png") no-repeat scroll 0 0 transparent;
  169. height: 65px;
  170. opacity: 0.85;
  171. overflow: hidden;
  172. position: absolute;
  173. text-indent: -999em;
  174. top: 40%;
  175. width: 65px;
  176. z-index: 30;
  177. }
  178. #demobox .nav-slide .next {
  179. background-position: 0 0;
  180. right: -65px;
  181. }
  182. #demobox .nav-slide .next:hover, #featured-demos .nav-slide .next:focus, #featured-demos .nav-slide .next:active {
  183. background-position: 0 -100px;
  184. }
  185. #demobox .nav-slide .prev {
  186. background-position: 0 -200px;
  187. left: -65px;
  188. }
  189. #demobox .nav-slide .prev:hover, #featured-demos .nav-slide .prev:focus, #featured-demos .nav-slide .prev:active {
  190. background-position: 0 -300px;
  191. }
  192.  
  193. ============================
  194. ======== CSS transform-origin - -moz-transform-origin:
  195. == https://www.google.fr/search?q=transform+css&ie=utf-8&oe=utf-8&rls=org.mozilla:fr:official&client=firefox-a&gws_rd=cr&ei=u6inUuTRHcib0QWjgoG4DA&safe=off
  196. == http://www.alsacreations.com/article/lire/1418-css3-transformations-2d.html
  197. Pour pouvoir appliquer des transformations, nous avons besoin de savoir
  198. quel est le point d'origine (d'ancrage) de la transformation.
  199. La propriété transform-origin définit ce point d'origine.
  200.  
  201. La valeur initiale de cette propriété est le centre de l'élément,
  202. ce qui équivaut à la notation :
  203.  
  204. transform-origin: 50% 50%;
  205.  
  206. Il est possible de changer cette valeur en utilisant
  207. un mot-clef de position (top, right, bottom, left)
  208. suivi d'une valeur chiffrée dont l'unité peut varier (px, %, etc.)
  209.  
  210. div {
  211. transform-origin: top 0 left 0;
  212. transform: scale(1.25);
  213. }
  214.  
  215. Il s'agit là de la syntaxe proposée par le W3C.
  216. À l'heure actuelle (2012) aucun navigateur n'implémente cette syntaxe correctement.
  217. Cependant, il suffit de supprimer les mots-clefs de position pour obtenir des résultats
  218. sur tous les navigateurs récents
  219. (toujours à condition d'utiliser les préfixes vendeurs -webkit-,-moz-,-ms-,-o- selon les versions);
  220.  
  221. Quelques exemples de positionnements :
  222.  
  223. Point d'origine en haut à gauche :
  224. transform-origin: 0 0;
  225. -moz-transform-origin: 0 0 !important;
  226.  
  227. Point d'origine en bas à droite :
  228. transform-origin: 100% 100%;
  229. -moz-transform-origin: 100% 100% !important;
  230.  
  231. Point d'origine en bas et centré:
  232. transform-origin: 50% 100%;
  233. -moz-transform-origin: 50% 100% !important;
  234.  
  235.  
  236. ============================
  237. ======== CSS transform - transform
  238. == http://www.alsacreations.com/article/lire/1418-css3-transformations-2d.html
  239.  
  240. Une fois l'origine choisie, nous pouvons affecter
  241. des transformations à nos éléments avec la propriété transform.
  242.  
  243. ==== La fonction translate
  244.  
  245. Elle permet d'effectuer une translation (un déplacement) de l'élément
  246. sur les axes X et Y.
  247.  
  248. Il n'y a ici aucune notion de flux, l'élément part de son emplacement courant,
  249. quel que soit le type de positionnement que vous lui aurez attribué.
  250.  
  251. transform: translate(x,y);
  252.  
  253. y est une valeur optionnelle équivalente à 0 si elle n'est pas renseignée.
  254. Les deux valeurs peuvent être négatives.
  255.  
  256. ==== Les fonctions translateX et translateY
  257. Ces fonctions permettent de réaliser une translation sur l'axe X (translateX) ou Y (translateY).
  258.  
  259. transform: translateX(value) translateY(value);
  260.  
  261. Si vous pensiez comme moi que ces fonctions permettent une modification
  262. de l'une des deux valeurs du vecteur initial,
  263. dans le cas par exemple où la transformation vient en écraser une autre,
  264. alors vous faites erreur. Essayez le code suivant pour comprendre :
  265.  
  266. div {
  267. transform: translate(20px, 35px);
  268. }
  269. div:hover {
  270. /* redéfinition de la valeur X ? */
  271. transform: translateX(20px);
  272. }
  273.  
  274. En définissant uniquement translateX sur l'évènement :hover,
  275. translateY est implicitement redéfini avec la valeur 0.
  276.  
  277. ==== La fonction scale
  278. Cette fonction permet d'agir sur l'échelle (les dimensions) de l'élément.
  279. La valeur initiale est 1, tandis que les valeurs supérieures à 1 créent un effet d'agrandissement,
  280. et les valeurs inférieures créent un effet de réduction.
  281.  
  282. transform: scale(x,y);
  283.  
  284. La valeur y est optionnelle et sera égale à la valeur de x si elle est non renseignée,
  285. par exemple pour un agrandissement d'un facteur 1.25 :
  286.  
  287. transform: scale(1.25);
  288.  
  289. Les valeurs de x et y peuvent être aussi négatives.
  290. Il est possible d'effectuer ce "zoom" sur tous les éléments a priori...
  291. mais ce n'est pas parce que vous pouvez le faire qu'il faut le faire.
  292. N'oubliez pas qu'une image agrandie pourra être floue ou mal interpolée
  293. selon sa résolution initiale et celle de l'écran de destination.
  294.  
  295. ==== Les fonctions scaleX et scaleY
  296.  
  297. Sur le même principe que pour les fonctions dérivées de translate,
  298. ces deux fonctions permettent de définir indépendamment les valeurs x et y.
  299.  
  300. Si scaleX est uniquement renseigné, scaleY vaudra implicitement 1
  301. (aucun effet de scale en y donc), et inversement.
  302.  
  303. transform: scaleY(1.25);
  304.  
  305. Cette transformation va élargir l'élément ainsi que son contenu éventuel.
  306. Il suffit de regarder la démonstration suivante pour constater la transformation
  307. (prêtez attention au texte de l'encadré vert).
  308.  
  309.  
  310. ============================
  311. ======== A ETUDIER :
  312. == http://robertnyman.com/css3/css-transitions/css-transitions-simple.html
  313.  
  314. CSS3 Transitions - To: CSS3 - Information and samples
  315.  
  316. Hover over the paragraph below to see a CSS Transition in action.
  317.  
  318. /* Shorthand version */
  319. #hello {
  320. display: inline-block;
  321. border: 1px dashed #000;
  322. padding: 10px;
  323. background: #ffffa2;
  324. height: 20px;
  325. opacity: 0.3;
  326.  
  327. /* Firefox */
  328. -moz-transition: height 1s ease-out, opacity 1s ease;
  329. /* WebKit */
  330. -webkit-transition: height 1s ease-out, opacity 1s ease;
  331. /* Opera */
  332. -o-transition: height 1s ease-out, opacity 1s ease;
  333. /* Standard */
  334. transition: height 1s ease-out, opacity 1s ease;
  335. }
  336.  
  337. #hello:hover {
  338. height: 40px;
  339. opacity: 1;
  340. }
  341.  
  342.  
  343. ============================
  344. ======== ANIMATION : TRANSITION > RADIUS
  345. == http://www.tutorialsavvy.com/2013/01/css3-transition.html
  346. In Css3 we can show transition of an object using transition property. Variation of this properties for different browsers are transition,-moz-transition, -moz-transform ,-webkit-transition, -webkit-transform,-o-transition.
  347. The other transition properties have duration,property,delay and timing function to control the css3 transition.
  348.  
  349. <!DOCTYPE html>
  350. <html>
  351.  
  352. <head>
  353. <title>CSS3 Transition Demo</title>
  354. <style>
  355. div.name {
  356. color:white;
  357. text-align:center;
  358. padding:100px;
  359. width:100px;
  360. height:75px;
  361. background:black;
  362. border:4px solid red;
  363. border-radius:0px;
  364. transition:border 2s, border-radius 2s, color 2s;
  365. -moz-transition:border 2s, border-radius 2s;
  366. -webkit-transition:border 2s, border-radius 2s;
  367. -o-transition:border 2s, border-radius 2s;
  368. }
  369. div.name:hover {
  370. border-radius:400px;
  371. border:4px solid yellow;
  372. background:green;
  373. color:yellow;
  374. }
  375. </style>
  376. </head>
  377.  
  378. <body>
  379. <div class="name">SANDEEP</div>
  380. </body>
  381. ============================
  382. =========== ANIMATION : TRANSITION: all 200ms linear; + transform: translateZ(0);
  383. CSS3 MAGNIFICATION / ENLARGE / SCALE EFFECT
  384. == http://www.priteshgupta.com/2011/06/html5-magnification-enlarge-scale-effect/
  385.  
  386. Default CSS for the element :
  387. -webkit-transition: all 200ms linear;
  388. -moz-transition: all 200ms linear;
  389. -o-transition: all 200ms linear;
  390. transition: all 200ms linear;
  391.  
  392. -webkit-transform: translateZ(0);
  393. -moz-transform: translateZ(0);
  394. -o-transform: translateZ(0);
  395. transform: translateZ(0);
  396.  
  397. Hover CSS for the element :
  398.  
  399. -webkit-transform: scale(1.1) translateZ(0);
  400. -moz-transform: scale(1.1) translateZ(0);
  401. -o-transform: scale(1.1) translateZ(0);
  402. transform: scale(1.1) translateZ(0);
  403.  
  404. ============================
  405. ======== ANIMATION : TRANSITION
  406. Pour définir une nouvelle transition animée,
  407. il est nécessaire de préciser au minimum 2 composantes :
  408. • la (ou les) propriété(s) à animer (transition-property) ;
  409. • la durée de l’animation (transition-duration).
  410. ==Exemple pour comprendre le principe général :
  411. img {
  412. width: 50px; /* état par défaut */
  413. transition-property: width; /* transition de la propriété width au survol de la souris */
  414. transition-duration: 1s; /* durée de la transition */
  415. }
  416. img:hover {
  417. width: 200px;
  418. }
  419. == 2 propriétés minimales nécessaires :
  420. - transition-property
  421. - transition-duration.
  422. Il existe cependant d’autres propriétés CSS spécifiques aux transitions :
  423. - transition-timing-function
  424. - transition-delay
  425. - notation raccourcie transition, qui cumule tous ces aspects.
  426.  
  427. ==Propriété à animer :
  428. transition-property
  429. La propriété transition-property accepte trois valeurs :
  430. • all (valeur par défaut) : toutes les propriétés possibles seront animées ;
  431. • propriété : le nom d’une propriété pouvant être animée ;
  432. • none : aucune propriété ne sera animée.
  433.  
  434. ========= Accélération
  435. La propriété transition-timing-function détermine la fluidité de l’animation.
  436. Les mots-clés admissibles pour cette propriété :
  437. • ease : rapide sur le début et ralenti sur la fin ;
  438. • linear (valeur par défaut) : vitesse constante sur toute la durée de l’animation ;
  439. • ease-in : lent sur le début et accélère de plus en plus vers la fin ;
  440. • ease-out : rapide sur le début et décélère sur la fin ;
  441. • ease-in-out : le départ et la fin sont lents.
  442.  
  443. ======== Transition Notation raccourcie :
  444. La notation raccourcien permet de décrire facilement et de manière concise les différentes
  445. propriétés en jeu à l’aide d’une seule propriété. La syntaxe est la suivante :
  446. selecteur {
  447. transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>;
  448. }
  449. ==Exemple transition 1 seconde de toutes les propriétés d’une image lors de son survol :
  450. img {
  451. transition: all 1s ease-in;
  452. }
  453.  
  454.  
  455. ============================
  456. ======== ANIMATION : Keyframes
  457. ==http://www.alsacreations.com/tuto/lire/1059-ID-slideshow-css3-animation-keyframes-automatique.html
  458. ==http://www.netmagazine.com/features/top-10-css3-techniques
  459.  
  460. Quelques propriétés d'animation liées au en CSS3 Nom de la propriété:
  461. === ANIMATION-NAME
  462. Le nom de l'animation à utiliser sur l'élément ciblé
  463. === ANIMATION-DURATION
  464. La durée de l'animation, définit la durée entre 0% et 100% (from et to)
  465. Valeur : durée (ms, s, etc.)
  466. === ANIMATION-ITERATION-COUNT
  467. Nombre de boucle (répétition que dois faire l'animation).
  468. Valeur :
  469. nombre ou infinite
  470. === ANIMATION-TIMING-FUNCTION
  471. Fonction de modification de l'interpolation de l'animation.
  472. Valeur :
  473. ease-in,
  474. ease-out,
  475. ease-in-out, etc.
  476. === ANIMATION-DIRECTION
  477. Comportement de la tête de lecture de l'animation (sens de lecture)
  478. Valeur :
  479. alternate,
  480. normal
  481. === ANIMATION-DELAY
  482. Impose un délais avant le début de l'animation
  483. Valeur :
  484. durée (ms, s, etc)
  485. ===ANIMATION-PLAY-STATE
  486. Statut de lecture de l'animation
  487. Valeur :
  488. running,
  489. paused
  490.  
  491. ============================
  492. ======== ANIMATION : TRANSITION / TARGET : VOLET COULISSANT ==:target + transition
  493. ==http://www.netmagazine.com/features/top-10-css3-techniques
  494. ==http://www.alsacreations.com/tuto/lire/1234-creer-volet-coulissant-CSS3-target-transition.html
  495. ==http://www.alsacreations.com/tuto/lire/1052-ID-slideshow-css3-target-animation-keyframes-introduction.html
  496.  
  497. ============================
  498. ======== ANIMATION : TRANSITION / HOVER /
  499. ==http://www.css3create.com/Menu-avec-slider-effet-transition
  500. Menu avec slider effet transition === -moz-transition
  501.  
  502. -moz-transition, -webkit-transition
  503. et les autres transitions pour gérer un effet de slide sur un menu.
  504.  
  505. ==Exemple : -moz-transition + OPACITY
  506. Lors du hover "on" sur un lien, on déplace la div sur la gauche (left),
  507. on augmente sa visualisation (opacity) et sa taille (width), grace aux transitions :
  508. ul li:hover div{
  509. left:182px;opacity:1;width:276px;
  510. -moz-transition:1s left,1s width,1s opacity;
  511. }
  512.  
  513. Lors du hover "out", on ré-utilise la transition
  514. mais pour repositionner la div dans son état d’origine :
  515. ul li div{
  516. left:0px;opacity:0;width:152px;
  517. -moz-transition:1s left,1s width,1s opacity;
  518. }
  519.  
  520. ============================
  521. ======== ANIMATION : TRANSITION / HOVER == DEMO == Image with sliding description panel using CSS3 transitions
  522. == http://www.dynamicdrive.com/style/csslibrary/item/image_with_sliding_description_panel_using_css3_transitions/
  523. CSS example shows how to add an animated description panel to images
  524. that slides open when the mouse rolls over the image using CSS3 transitions.
  525. By wrapping the image inside a relatively positioned container alongside a newly injected description DIV
  526. to house the description itself, we can slide the later into view using CSS3's transform:translate() property.
  527. All four sliding directions are shown below (up, down, right, or left).
  528. The onset of the sliding animation is delayed by 0.5 seconds each time using the transition-delay property,
  529. so it occurs after that of the CSS3 shadow being added to the image to create the effect of a raised image.
  530. The result is a cool image with a sliding description panel that uses nothing more than HTML/ CSS to create the effect.
  531.  
  532. The following works best in a modern browser that supports CSS3 transitions, namely, IE10+, FF3.5+,
  533. Chrome/Safari, and Opera 10. Lesser browsers such as IE9 will still see the description panel onMouseover, just sans the transition:
  534.  
  535. <style>
  536.  
  537. .imagepluscontainer{ /* main image container */
  538. position: relative;
  539. z-index: 1;
  540. }
  541.  
  542. .imagepluscontainer img{ /* CSS for image within container */
  543. position: relative;
  544. z-index: 2;
  545. -moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
  546. -webkit-transition: all 0.5s ease-in-out;
  547. -o-transition: all 0.5s ease-in-out;
  548. -ms-transition: all 0.5s ease-in-out;
  549. transition: all 0.5s ease-in-out;
  550. }
  551.  
  552. .imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
  553. -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  554. -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  555. box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  556. -moz-transform: scale(1.05, 1.05);
  557. -webkit-transform: scale(1.05, 1.05);
  558. -ms-transform: scale(1.05, 1.05);
  559. -o-transform: scale(1.05, 1.05);
  560. transform: scale(1.05, 1.05);
  561. }
  562.  
  563. .imagepluscontainer div.desc{ /* CSS for desc div of each image. */
  564. position: absolute;
  565. width: 90%;
  566. z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
  567. bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
  568. left: 5px;
  569. padding: 8px;
  570. background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
  571. color: white;
  572. -moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
  573. -webkit-border-radius: 0 0 8px 8px;
  574. border-radius: 0 0 8px 8px;
  575. opacity: 0; /* Set initial opacity to 0 */
  576. -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
  577. -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  578. box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  579. -moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
  580. -webkit-transition: all 0.5s ease 0.5s;
  581. -o-transition: all 0.5s ease 0.5s;
  582. -ms-transition: all 0.5s ease 0.5s;
  583. transition: all 0.5s ease 0.5s;
  584. }
  585.  
  586. .imagepluscontainer div.desc a{
  587. color: white;
  588. }
  589.  
  590. .imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */
  591. -moz-transform: translate(0, 100%);
  592. -webkit-transform: translate(0, 100%);
  593. -ms-transform: translate(0, 100%);
  594. -o-transform: translate(0, 100%);
  595. transform: translate(0, 100%);
  596. opacity:1; /* Reveal desc DIV fully */
  597. }
  598.  
  599. /*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/
  600.  
  601. .imagepluscontainer div.rightslide{
  602. width: 150px; /* reset from default */
  603. top:15px;
  604. right:0;
  605. left:auto; /* reset from default */
  606. bottom:auto; /* reset from default */
  607. padding-left:15px;
  608. -moz-border-radius: 0 8px 8px 0;
  609. -webkit-border-radius: 0 8px 8px 0;
  610. border-radius: 0 8px 8px 0;
  611. }
  612.  
  613. .imagepluscontainer:hover div.rightslide{
  614. -moz-transform: translate(100%, 0);
  615. -webkit-transform: translate(100%, 0);
  616. -ms-transform: translate(100%, 0);
  617. -o-transform: translate(100%, 0);
  618. transform: translate(100%, 0);
  619. }
  620.  
  621. /*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/
  622.  
  623. .imagepluscontainer div.leftslide{
  624. width: 150px; /* reset from default */
  625. top:15px;
  626. left:0;
  627. bottom:auto; /* reset from default */
  628. padding-left:15px;
  629. -moz-border-radius: 8px 0 0 8px;
  630. -webkit-border-radius: 8px 0 0 8px;
  631. border-radius: 8px 0 0 8px;
  632. }
  633.  
  634. .imagepluscontainer:hover div.leftslide{
  635. -moz-transform: translate(-100%, 0);
  636. -webkit-transform: translate(-100%, 0);
  637. -ms-transform: translate(-100%, 0);
  638. -o-transform: translate(-100%, 0);
  639. transform:translate(-100%, 0);
  640. }
  641.  
  642. /*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/
  643.  
  644. .imagepluscontainer div.upslide{
  645. top:0;
  646. bottom:auto; /* reset from default */
  647. padding-bottom:10px;
  648. -moz-border-radius: 8px 8px 0 0;
  649. -webkit-border-radius: 8px 8px 0 0;
  650. border-radius: 8px 8px 0 0;
  651. }
  652.  
  653. .imagepluscontainer:hover div.upslide{
  654. -moz-transform: translate(0, -100%);
  655. -webkit-transform: translate(0, -100%);
  656. -ms-transform: translate(0, -100%);
  657. -o-transform: translate(0, -100%);
  658. transform:translate(0, -100%);
  659. }
  660.  
  661. </style>
  662.  
  663.  
  664. ============================
  665. ======== ANIMATION : TRANSITION [ -moz-transition / -webkit-transition and without Vendor ] + (by example : property , duration , opacity ):
  666. == http://coding.smashingmagazine.com/2009/12/19/what-you-need-to-know-about-behavioral-css/
  667. Define and moves an element from its inactive state (e.g. dark-blue background)
  668. to its hover or active state (e.g. light-blue background).
  669.  
  670. Can be coupled with transformations (and trigger events such as :hover or :focus)
  671. to create a kind of animation :
  672. =Exemple :
  673. Fading the background color, sliding a block and spinning an object can all be done with CSS transitions:
  674.  
  675. #nav a{
  676. background-color:red;
  677. }
  678. #nav a:hover,
  679. #nav a:focus{
  680. background-color:blue;
  681. /* tell the transition to apply to background-color (looks like a CSS variable, doesn't it? #foreshadowing)*/
  682. -webkit-transition-property:background-color;
  683. /* make it 2 seconds long */
  684. -webkit-transition-duration:2s;
  685. }
  686.  
  687. ============================
  688. ======== ANIMATION : TRANSFORM SCALE [ -webkit-transform / -moz-transform / -o-transform ] X ou Y :scale or scale(1.1, 1.1)
  689. ==http://www.netmagazine.com/features/top-10-css3-techniques
  690. ==http://www.w3schools.com/cssref/css3_pr_transform.asp
  691.  
  692. -moz-transform:scaleX(0.5)!important;
  693. -moz-transform:scaleY(0.5)!important;
  694. ==Exemple perso :
  695. -moz-transform: scale(1.1, 1.1) !important;
  696.  
  697. ============================
  698. ======== ANIMATION : TRANSFORM TRANSLATE [ -webkit-transform / -moz-transform / -o-transform ]: translate(15px, -15px);
  699. transform: translate(15px, -15px);
  700. ==http://www.netmagazine.com/features/top-10-css3-techniques
  701. ==http://coding.smashingmagazine.com/2009/12/19/what-you-need-to-know-about-behavioral-css/
  702. ==http://www.standardista.com/css3-transforms/
  703. === translate() :
  704. The translate(x, y) function is similar to relative positioning, translating, or relocating, an element by x from the left, and y from the top.
  705. -webkit-transform: translate(15px, -15px);
  706. -moz-transform: translate(15px, -15px);
  707. -o-transform: translate(15px, -15px);
  708. transform: translate(15px, -15px);
  709. ===translateX() :
  710. The translateX(x) function is similar to the translate() function above, but only the left/right value is specified
  711. -webkit-transform: translatex(15px);
  712. -moz-transform: translatex(15px);
  713. -o-transform: translatex(15px);
  714. transform: translatex(15px);
  715. ===translateY() :
  716. The translateY(y) function is similar to the translate() function above, but only the top/bottom value is specified
  717. -webkit-transform: translatey(-15px);
  718. -moz-transform: translatey(-15px);
  719. -o-transform: translatey(-15px);
  720. transform: translatey(-15px);
  721.  
  722. ============================
  723. ======== ANIMATION : TRANSFORM TRANSLATE [ -moz-transform / -webkit-transform ]: translate
  724. ==http://coding.smashingmagazine.com/2009/12/19/what-you-need-to-know-about-behavioral-css/
  725. You can move, turn, zoom in on and manipulate any inline or block-level element without JavaScript :
  726. Positioning elements using X and Y values
  727. ==transform translate example :
  728. #nav{
  729. /* This will move the #nav element left 10 pixels and down 20 pixels. */
  730. -moz-transform: translate(10px, 20px);
  731. -webkit-transform: translate(10px, 20px);
  732. }
  733. == Chaining Transformations :
  734. #nav{
  735. -moz-transform: translate(10, 25);
  736. -webkit-transform: translate(10, 25);
  737. -moz-transform: rotate(90deg);
  738. -webkit-transform: rotate(90deg);
  739. -moz-transform: scale(2, 1);
  740. -webkit-transform: scale(2, 1);
  741. }
  742. Chained together to make your CSS more efficient:
  743. #nav{
  744. -moz-transform: translate(10, 25) rotate(90deg) scale(2, 1);
  745. -webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1);
  746. }
  747.  
  748.  
  749. ============================
  750. ======== ANIMATION : TRANSFORM TRANSLATE [ -moz-transform / -webkit-transform ]: translate
  751. ==http://css3clickchart.com/?prop=translate-transform
  752. =Position an element vertically and/or horizontally,
  753. similar to CSS positioning, using a function as a value for the transform property:
  754. .element {
  755. -webkit-transform: translate(25px, 50px);
  756. -moz-transform: translate(25px, 50px);
  757. -o-transform: translate(25px, 50px);
  758. -ms-transform: translate(25px, 50px);
  759. transform: translate(25px, 50px);
  760. }
  761.  
  762. ============================
  763. ======== ANIMATION :
  764. == http://leaverou.github.com/animatable/
  765. ==EXEMPLE :
  766. #on-hover:checked ~ div[role="main"] > a[data-property]:not(:hover):not(:target),
  767. body.in-page a[data-property]:not(:target) {
  768. -moz-animation: 0s ease 0s normal none 1 none !important;
  769. }
  770.  
  771. ============================
  772. ======== ANIMATION : Accordion (A VOIR))
  773. ==http://jsdo.it/jasmine88/ya52
  774. .ac-container article{
  775. background: rgba(255,255,255,0.5);
  776. margin-top: -1px;
  777. overflow: hidden;
  778. height: 0px;
  779. position: relative;
  780. z-index: 10;
  781. transition:height 0.3s ease-in-out, box-shadow 0.6s linear;
  782. -moz-transition:height 0.3s ease-in-out, box-shadow 0.6s linear;
  783. -webkit-transition:height 0.3s ease-in-out, box-shadow 0.6s linear;
  784. }
  785. .ac-container input:checked ~ article{
  786. transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  787. -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  788. -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  789. box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.5);
  790. -moz-box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.5);
  791. -webkit-box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.5);
  792. }
  793.  
  794. ============================
  795. ======== ANIMATION : Accordion ===:target pseudo-class
  796. ==http://www.paulrhayes.com/2009-06/accordion-using-only-css/
  797. ==http://www.aplweb.co.uk/blog/css/pure-css3-accordion/
  798. Using -webkit-transition Accordion can also be animated.
  799. How To:
  800. Each part of the accor­dion has an ID, head­ing and con­tent region.
  801. The header includes a link that matches the section’s ID,
  802. whilst the con­tent is wrapped in a container which will control its display.
  803. <div class="accordion">
  804. <h2>Accordion Demo</h2>
  805. <div id="one" class="section">
  806. <h3>
  807. <a href="#one">Heading 1</a>
  808. </h3>
  809. <div>
  810. <p>Content</p>
  811. </div>
  812. </div>
  813. <div id="two" class="section">
  814. <h3>
  815. <a href="#two">Heading 2</a>
  816. </h3>
  817. <div>
  818. <p>Content</p>
  819. </div>
  820. </div>
  821. </div>
  822. The CSS then relies on the :target pseudo-class to apply different styles to the chosen section :
  823. - increasing the height and, in large content cases, altering the over­flow behaviour to allow scrolling.
  824. To animate the opening and closing of sections the -webkit-transition property is needed ,
  825. in this case acting on the height attribute for a duration of 0.3 seconds using the easein timing function.
  826.  
  827. Strip­ping out the styling, the CSS boils down to:
  828. .accordion h3 + div {
  829. height: 0;
  830. overflow: hidden;
  831. -webkit-transition: height 0.3s ease-in;
  832. }
  833. .accordion :target h3 + div {
  834. height: 100px;
  835. }
  836. .accordion .section.large:target h3 + div {
  837. overflow: auto;
  838. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!